Example: InlineEditor ExecCommands

Working with InlineEditor

InlineEditor is not a fully functional Editor, it is simply the base utility that will be used under the hood to create an Editor.

Creating the Editor

In this step we are going to do the initial render of the Editor, set its content, and focus it when it's ready.

YUI().use('editor-inline', function(Y) {

    //Create the Inline Editor
    var editor = new Y.InlineEditor({
        content: '<p><b>This is <i class="foo">a test</i></b></p><p><b style="color: red; font-family: Comic Sans MS">This is <span class="foo">a test</span></b></p>',
        extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }'
    });

    //Rendering the Editor.
    editor.render('#editor');

});

Registering a new execCommand

ExecCommand overrides are stored on the execCommand plugin. This way, you can write a plugin for Editor and have it available to all Editor instances in your sandbox.

To create a new execCommand, we simply add an object literal to the Y.Plugin.ExecCommand.COMMANDS static object like this:

Y.mix(Y.Plugin.ExecCommand.COMMANDS, {
    foo: function(cmd, val) {
        logFn('You clicked on Foo');
        var container = this.get('host').get('container');
        container.setStyle('backgroundColor', 'yellow');
    }
});

Now we can use this new command like:

editor.execCommand('foo');

Full Example Source

HTML

<p>Clicking on one of the buttons below will execute a custom <code>execCommand</code> on the Editor.</p>

<div id="editor_cont">
    <div id="buttons">
        <button id="foo">Foo Command</button>
        <button id="bar">Bar Command</button>
        <button id="baz">Baz Command</button>
    </div>
    <div id="editor"></div>
    <div id="out">&nbsp;</div>    
</div>

CSS

#editor_cont {
    width: 600px;
    border: 1px solid #999;
    margin: 2em;
    background-color: #f2f2f2;
}
#editor {
    height: 265px;
    overflow: auto;
    background-color: #fff;
}
#buttons, #out {
    padding: 10px;
}
#buttons {
    border-bottom: 1px solid #999;
}
#out {
    font-weight: bold;
    border-top: 1px solid #999;
}

Javascript

YUI().use('editor-inline', function(Y) {

    var logFn = function(str) {
        Y.one('#out').set('innerHTML', str);
    };

    //Create the Base Editor
    var editor = new Y.InlineEditor({
        content: '<p><b>This is <i class="foo">a test</i></b></p><p><b style="color: red; font-family: Comic Sans MS">This is <span class="foo">a test</span></b></p>',
        extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }'
    });

    //Mixin the new commands
    Y.mix(Y.Plugin.ExecCommand.COMMANDS, {
        foo: function(cmd, val) {
            logFn('You clicked on Foo');
            var container = this.get('host').get('container');
            container.setStyle('backgroundColor', 'yellow');
        },
        bar: function(cmd, val) {
            logFn('You clicked on Bar');
            var container = this.get('host').get('container');
            container.setStyle('backgroundColor', 'green');
        },
        baz: function(cmd, val) {
            logFn('You clicked on Baz');
            var container = this.get('host').get('container');
            container.setStyle('backgroundColor', 'blue');
        }
    });


    //Rendering the Editor.
    editor.render('#editor');

    Y.delegate('click', function(e) {
        editor.execCommand(e.target.get('id'));
    }, '#buttons', 'button');
});