Custom commands - accessing the editor
HTML
<script src="https://s3.amazonaws.com/ephox-static-ephox-com/jsfiddle/textboxio/textboxio.js"></script>
<div id="editableDiv">
<p>This is the Editor content</p>
</div>
CSS
#editableDiv {
margin:10px 0;
height:200px;
}
JavaScript
var customCommand = {
id : 'myCommand',
text : 'my custom command',
action : function () {
var ed = textboxio.getActiveEditor();
//do something meaningful with the editor when the user clicks the command
ed.content.insertHtmlAtCursor('hello world');
}
};
textboxio.replace('#editableDiv',{
ui: {
toolbar: {
// groups can be defined inline as part of the toolbar items
items: ['undo','fileupload', 'style', 'emphasis', 'align', 'listindent', 'format', 'tools', // other toolbar items
{
label: 'Custom commands group',
items: [customCommand]
}
]
}
}
});