YUI 3.x Home -

YUI Library Examples: Rich Text Editor: Creating ExecCommands

Rich Text Editor: Creating ExecCommands

Creating custom execCommands

View example in new window.

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.

  1. YUI().use('editor', function(Y) {
  2.  
  3.     //Create the Base Editor
  4.     var editor = new Y.EditorBase({
  5.         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>',
  6.         extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }'
  7.     });
  8.  
  9.     //Rendering the Editor.
  10.     editor.render('#editor');
  11.  
  12. });
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:

  1.     Y.mix(Y.Plugin.ExecCommand.COMMANDS, {
  2.         foo: function(cmd, val) {
  3.             logFn('You clicked on Foo');
  4.             var inst = this.getInstance();
  5.             inst.one('body').setStyle('backgroundColor', 'yellow');
  6.         }
  7.     });
    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:

  1.     editor.execCommand('foo');
    editor.execCommand('foo');

Full Example Source

  1. YUI().use('editor', function(Y) {
  2.  
  3.     var logFn = function(str) {
  4.         Y.one('#out').set('innerHTML', str);
  5.     };
  6.  
  7.     //Create the Base Editor
  8.     var editor = new Y.EditorBase({
  9.         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>',
  10.         extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }'
  11.     });
  12.  
  13.     //Mixin the new commands
  14.     Y.mix(Y.Plugin.ExecCommand.COMMANDS, {
  15.         foo: function(cmd, val) {
  16.             logFn('You clicked on Foo');
  17.             var inst = this.getInstance();
  18.             inst.one('body').setStyle('backgroundColor', 'yellow');
  19.         },
  20.         bar: function(cmd, val) {
  21.             logFn('You clicked on Bar');
  22.             var inst = this.getInstance();
  23.             inst.one('body').setStyle('backgroundColor', 'green');
  24.         },
  25.         baz: function(cmd, val) {
  26.             logFn('You clicked on Baz');
  27.             var inst = this.getInstance();
  28.             inst.one('body').setStyle('backgroundColor', 'blue');
  29.         }
  30.     });
  31.  
  32.  
  33.     //Rendering the Editor
  34.     editor.render('#editor');
  35.  
  36.     Y.delegate('click', function(e) {
  37.         editor.execCommand(e.target.get('id'));
  38.     }, '#buttons', 'button');
  39. });
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');
});

More Rich Text Editor Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings