#

Jump to Table of Contents

# Example: ExecCommands

Creating and using custom ExecCommands.

Clicking on one of the buttons below will execute a custom `execCommand` on the Editor.

### Working with EditorBase

`EditorBase` 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', function(Y) {

        //Create the Base Editor
        var editor = new Y.EditorBase({
            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 inst = this.getInstance();
            inst.one('body').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;
        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', function(Y) {

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

        //Create the Base Editor
        var editor = new Y.EditorBase({
            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 inst = this.getInstance();
                inst.one('body').setStyle('backgroundColor', 'yellow');
            },
            bar: function(cmd, val) {
                logFn('You clicked on Bar');
                var inst = this.getInstance();
                inst.one('body').setStyle('backgroundColor', 'green');
            },
            baz: function(cmd, val) {
                logFn('You clicked on Baz');
                var inst = this.getInstance();
                inst.one('body').setStyle('backgroundColor', 'blue');
            }
        });

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

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