General developer forum

Hi Justin,

Firstly yay - I like that you're writing your first Atto plugin. We've worked hard to try and produce a friendly API so any feedback you have would be gratefully appreciated.

There's actually a whole set of API docs for atto, but the relevant one for what you want is at http://apidocs.moodle.org/js/master/classes/M.editor_atto.EditorPlugin.html#method_addButton

When you call addButton, you just need to specify the iconComponent key. Here's an example:

initializer: function() {
    // Add the poodll button first.
    this.addButton({
        icon: 'e/insert_edit_poodll',
        iconComponent: 'atto_poodll',
        callback: this._displayDialogue,
        tags: 'a'
    });
} 

The reason that all of the core plugins use the standard core component is because we wanted to help encourage use of the same icons for core functionality of all editors - that's to say that changing the icon for one editor should change all editors by default so all editors have the same Bold, Italic, Underline, etc... icons.

For contrib plugins you'll then need to put your icon image into the following folder:

lib/editor/atto/plugins/poodll/pix/e

You don't *have* to use Shifter - you can use the fallback method, but it's advisable that you do use Shifter as this handles things like minification, linting, dependency seeding, and a few other bits and pieces. If you don't want to use Shifter, then you can put the JS in (I think, but haven't tested):

lib/editor/atto/yui/button/button.js

Hope that this helps and good luck,

Andrew