Plugins

A plugin in SubEditor is an array of events registered under a string name. To understand the events please visit: event page for details. The list of default build-in plugins are:

• fullscreen: allow to toggle editor into fullscreen.
• hr: insert horizontal line at cursor.
• color: text color and background color.
• source: view and editor html source code of current content.
• align: align text left, right, center, or justify.
• text: common text style such as**: "bold", "italic","underline","strikethrough","subscript","superscript"
• undo: captures "cmd+z" and "ctrl+z", reverts content back to last changed version.
• redo: captures "ctrl+y" and "cmd+shift+z", move content into next changed version if it was previous reverted.
• indent: text indent and outdent by using padding
• format: Normal(p),h1,h2,h3,h4,h5,h6,blockquote, code
• remove_format: remove color and all of the following tags: "H1","H2","H3","H4","H5","H6","CODE","B","STRONG","I","EM","U","PRE","BLOCKQUOTE","A","STRIKE","SUB","SUP","SPAN".
• link: create and insert url link.
• paste: cleanup html code and insert the pasted content into editor.
• list: create order and unorder list
• table: create table
• image: allow to create image by url, upload or view in a library. This plugin require additional configuration and server side support, please visit: image plugin page for details.

Developing Custom Plugin

simply declare the name of the plugin (and associated toolbar) during initialization to start using.

var myownplugin = [{
    event : "onCommand",
    target : ["log"],
    callback : (editor, logstr) {
        console.log(logstr);
    }
}];
var subeditor = new SubEditor(elm,  {
        onChange : function(change) { console.log(change);},
        lang : "en",
        pluginList : [myownplugin, "fullscreen","hr", "color","source","align","text","undo","redo","indent","format","remove_format","link", "paste","list", "table","image"],
        toolbarList : ["undo","redo","text","format","link","remove_format","indent","outdent","color","backgroundcolor","align","ol","ul","image", "library","table","hr","source","fullscreen"]
    
    });

initPlugins(plugins : (SubEditorEvent[] | string)[])

method: non-static
params: (plugins : (SubEditorEvent[] | string)[])

add plugin to the editor after initialization, available only to current instance. Use string value to enable default preset, or include your own plugin code.

var subeditor = new SubEditor(elm, options);
//enable default redo plugin:
subeditor.initPlugins(["redo"]);

//register a "redo" plugin 
editor.initPlugins([
    {
        event : "onCommand",
        target : ["redo"],
        callback : (editor :SubEditor, type : string, value : any) => {
            editor.handleChange(editor.history.Redo());
        }
    },
    {
    event : "onKeyDown",
    target : ["mod+y","cmd+shift+z"],
    callback : (editor :SubEditor, e : KeyboardEvent) => {
        e.preventDefault();
        e.stopPropagation();
        editor.handleChange(editor.history.Redo());
        return false;
    }
}]);

presetPlugin(pluginName : string, plugin : SubEditorEvent[])

method: static
params: (pluginName : string, plugin : SubEditorEvent[])

pre-define a plugin available globally and share among all instances. Using the same name will replace default plugin.

var myredoplugin = [
    {
        event : "onCommand",
        target : ["redo"],
        callback : (editor, type, value) => {
            console.log("myredoplugin");
            editor.handleChange(editor.history.Redo());
        }
    },
    {
    event : "onKeyDown",
    target : ["mod+y","cmd+shift+z"],
    callback : (editor, e) => {
        e.preventDefault();
        e.stopPropagation();
        console.log("myredoplugin");
        editor.handleChange(editor.history.Redo());
        return false;
    }
}];

//make the above redo available:
SubEditor.presetPlugin("redo", myredoplugin);

//redo=myredoplugin
var subeditor = new SubEditor(elm,  {
        pluginList : ["redo"],
        toolbarList : ["redo"]
    
});

//alternatively:
var subeditor = new SubEditor(elm,  {
        pluginList : [myredoplugin],
        toolbarList : ["redo"]
    
});