General developer forum

Atto Plugin Template

 
 
Picture of Justin Hunt
Atto Plugin Template
Group Particularly helpful Moodlers

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)
Picture of Andrew Nicols
Re: Atto Plugin Template
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup 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)
Picture of Justin Hunt
Re: Atto Plugin Template
Group Particularly helpful Moodlers

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.

 
Average of ratings: -
Picture of Barbara Taylor
Re: Atto Plugin Template
 

Justin,

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

Thank you,

Barbara

 
Average of ratings: -
Picture of Justin Hunt
Re: Atto Plugin Template
Group Particularly helpful Moodlers

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.

 
Average of ratings: -
Edwin Noorlander
Re: Atto Plugin Template
 
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
 
Average of ratings: -
Picture of Justin Hunt
Re: Atto Plugin Template
Group Particularly helpful Moodlers
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)


 
Average of ratings: -
Edwin Noorlander
Re: Atto Plugin Template
 

No I did. But still no icon?

 
Average of ratings: -
Picture of Justin Hunt
Re: Atto Plugin Template
Group Particularly helpful Moodlers

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.

 
Average of ratings: -