YUI 3.x Home -

YUI Library Examples: Rich Text Editor: Using the Editor's Instance

Rich Text Editor: Using the Editor's Instance

Use the Editor's instance to query the iframe

View example in new window.

Click the buttons below to query the Editor for its contents. You can even modify the contents and click them again to see the difference.

 

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.

When the Editor is created, it creates a YUI instance inside itself and attaches that instance to the editable iframe. This means that you now have the full power of YUI 3 inside the Editor iframe. You can use Event, Stylesheet, Node and even DD inside the iframe, without having to load all the JavaScript inside the document. In this example we will show how to use the internal YUI instance to get Node instances from the Editor.

Getting access to this instance is simple. Just use the getInstance method on the Editor instance.

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');
 
});

Full Example Source

  1. YUI().use('editor', function(Y) {
  2.  
  3.     var log = 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.     //Rendering the Editor
  13.     editor.render('#editor');
  14.  
  15.     Y.on('click', function(e) {
  16.         var inst = editor.getInstance(),
  17.             bs = inst.all('b');
  18.  
  19.         log('There are (' + bs.size() + ') B tags in the iframe.');
  20.     }, '#btags');
  21.  
  22.     Y.on('click', function(e) {
  23.         var inst = editor.getInstance(),
  24.             bs = inst.all('i');
  25.  
  26.         log('There are (' + bs.size() + ') I tags in the iframe.');
  27.     }, '#itags');
  28.  
  29.     Y.on('click', function(e) {
  30.         var inst = editor.getInstance(),
  31.             bs = inst.all('.foo');
  32.  
  33.         log('There are (' + bs.size() + ') items with class foo in the iframe.');
  34.     }, '#ctags');
  35.  
  36. });
YUI().use('editor', function(Y) {
 
    var log = 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; }'
    });
    //Rendering the Editor
    editor.render('#editor');
 
    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('b');
 
        log('There are (' + bs.size() + ') B tags in the iframe.');
    }, '#btags');
 
    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('i');
 
        log('There are (' + bs.size() + ') I tags in the iframe.');
    }, '#itags');
 
    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('.foo');
 
        log('There are (' + bs.size() + ') items with class foo in the iframe.');
    }, '#ctags');
 
});

More Rich Text Editor Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

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