Customise Edit Button for ContentTools

Question

I am having a hard time to understand how I could change the appearance and/or position of the edit (Ignition) button in ContentTools (a wysiwyg editor).

I found out that I can use editor.start(); and editor.stop(); to trigger the editing of the page and I would like to map these function to my own buttons but I cannot get rid of the default button.

The documentation and tutorials on their website did not help me enough to understand this.

Thank you!

Answer 1

There are 2 ways I recommend doing this, the simplest option is to hide the ignition button (as it's called) like so (reference SASS):

.ct-ignition {
    display: none;
}

If you would prefer to remove the button from the DOM entirely then you could unmount the button from the UI like so (reference CoffeeScript):

// Once the Editor has been initialized
ContentTools.EditorApp.get()._ignition.unmount();

My advice would be to use CSS to hide the ignition and to trigger events against it to call functionality manually via your custom button, like so:

var editor = ContentTools.EditorApp.get();

// Starting the editor manually
editor._ignition.trigger('start');

// Stoping the editor manually (save)
editor._iginition.trigger('stop', true);

// Stoping the editor manually (cancel)
editor._iginition.trigger('stop', false);

It may be useful to review these questions asked on the the projects github issue list also:

• https://github.com/GetmeUK/ContentTools/issues/77
• https://github.com/GetmeUK/ContentTools/issues/78