Customise Edit Button For ContentTools

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!



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

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

// 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: