Atto Plugin Template

Atto Plugin Template

by Justin Hunt -
Number of replies: 11
Picture of Particularly helpful Moodlers Picture of Plugin developers

Since I have a number of TinyMCE plugins to port to Atto, I went and made a simple template and it is available on GitHub.

Hopefully it will help others get up and running quickly.

https://github.com/justinhunt/moodle-atto_newtemplate


Average of ratings: Useful (9)
In reply to Justin Hunt

Re: Atto Plugin Template

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Justin,

That looks awesome - thanks!

I'm going to submit a couple of Pull Requests for you shortly. Largely to add additional notes to the readme.

I notice that you're using this._config = config. One of the features that we're making massive use of in Atto is that of YUI Attributes. Every Atto plugin extends Y.Attribute which provides these. Rather than working with the config in the initializer, saving it, writing defaults, etc. you can instead add an additional object after your prototype which describes all of the attribute you wish to use, and their defaults:

Y.namespace('M.atto_NEWTEMPLATE').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
    initializer: function() {
        // Handle the button addition here.

        // Handle any other things which *must* be done on setup. Try to keep this to a minimum.
    }
}, {
    // We put the attributes here.
    disabled: {
        // We are not disabled by default:
        value: false
    },

    usercontextid: {
        // By default we do not have a usercontextid - it must be specified.
        value: null
    }

}
});

Then when you wish to use one, you can simply use:

this.get('disabled');

There are other handy features to attributes like setters, and getters. By default they lazy-load so that any expensive work isn't done until the first time that they're accessed. You can also define them as read-only, or writeOnce, and other such things. There's more information at http://yuilibrary.com/yui/docs/base/#attrsprop

Another feature of the new plugin system is that attributes are inheritted from the parent class (as you would expect). In the case of EditorPlugin there are only two at present (group, and host). You automatically have access to these in the same way - just use this to get the instance of the Editor itself:

this.get('host');

You can find documentation on those attributes at http://apidocs.moodle.org/js/master/classes/M.editor_atto.EditorPlugin.html#index

You can also access the attributes of the Editor itself too - see http://apidocs.moodle.org/js/master/classes/M.editor_atto.Editor.html#index for the list of options. The Editor instance is available to the plugin at this.get('host'), so you can access it's elementid (for example) with:

this.get('host').get('elementid');

Hope that this helps, and keep up the good work.

Best wishes,

Andrew

Average of ratings: Useful (5)
In reply to Andrew Lyons

Re: Atto Plugin Template

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks for the tips. I have merged those changes into the template now. Removing the build folder for the button javascript, means that the plugin won't show on the editor till the developer has run shifter. I added a note in the README to that effect. 

Soon I will write up a tutorial + video on how to use the template to get up and running.

In reply to Justin Hunt

Re: Atto Plugin Template

by Barbara Taylor -

Justin,

Will you please post a picture of what this new plug-in would look like?

Thank you,

Barbara

In reply to Barbara Taylor

Re: Atto Plugin Template

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

The Atto template is like a skeleton plugin. It has all the plugin basics, an icon on the editor, a settings page etc. But it does nothing special. It is meant to help people get started quickly when writing an atto plugin that actually does do something. 

So I have not got anything much to show in terms of a screenshot for it. But I have several plugins I am basing on the template. I wanted to use one of those to make  tutorial to show how it works, but I am tied up till the end of the month with another project.

I will try and hurry it along though.

In reply to Justin Hunt

Re: Atto Plugin Template

by Edwin Noorlander -
Hi Justin,

I get the plugin is not underway. I use Moodle 2.7.3 and renamed everything and let you install the plugin and it went well.
I have the plugin also added under the atto settings but if I get an editor open , I do not see the plugin. What is going wrong here?

I want to create a plugin that I have a style selections in the text " class" can give . So the stylesheet from my theme here style may grant .

greeting Edwin
In reply to Edwin Noorlander

Re: Atto Plugin Template

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers
I think you just failed to add the editor icon to Atto. You have to do this from site admin.

From the docs
============
 Go to Site Administration > Plugins > Text Editors > Atto Toolbar Settings
  and you should find that this plugin has been added to the list of installed modules.
Now add the name of your plugin to the menu structure near the bottom of the page
  e.g style1 = title, bold, italic, widget
  (where widget is the name of your atto plugin)


In reply to Justin Hunt

Re: Atto Plugin Template

by Edwin Noorlander -

No I did. But still no icon?

In reply to Edwin Noorlander

Re: Atto Plugin Template

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I think it is probably a simple problem, but from here I can't say much. Go through the steps again carefully,

  • Did you miss anything?
  • Did anything go wrong in the rename process?
  • Did you run shifter?
  • Are there any errors in the browsers javascript console when you show the editor?

You probably chose a good name for a plugin. But, just in case, a name like "class" or "style" would be asking for trouble. Something like "classify" or "mystyle" would be easier to work with.

And if you really can't figure it out. Well you are just starting. It does not take long to start from scratch. Perhaps that would be faster.

In reply to Justin Hunt

Re: Atto Plugin Template

by Phil Blyth -

Hi Justin, Thanks for the template works a treat. My first Moodle (and Atto) plugin. For other newbies- Its not really that difficult. Having followed your great instructions to get the plugin onto my local, I took a little while to work out how to see my edits.Therefore my iterating workflow is as follows

  1. Modify button.js to your requirements smile
  2. Increment the version in version.php (so your moodle install knows it needs to update
  3. Run shifter
  4. Site Admin>Notifications> Update Moodle Database
  5. Reload the tab where you were editing using the Atto Editor
  6. Test to see whether your code works correctly and then inevitably ....Goto Step 1 
In reply to Phil Blyth

Re: Atto Plugin Template

by Andreas Schenkel -
Picture of Plugin developers
Does the template work for moodle 3.1?
In http://docs.moodle.org/dev/YUI/Shifter there is an information to use grunt instead of shifter since moodle 2.9.
In reply to Andreas Schenkel

Re: Atto Plugin Template

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

HI Andreas

I have not updated for a while, but I think it will be ok. The instructions might need an upgrade however .. as you spotted.