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.

When the Editor is created, it creates a YUI instance inside itself and allows you to load new modules just for the editor. This means that you now have the full power of YUI 3 inside the Editor. You can use Event, Stylesheet, Node and even DD inside the content editable node, 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.

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

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

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

});

Full Example Source

HTML

<div id="editor_cont">
    <div id="buttons">
        <button id="btags"># B tags?</button>
        <button id="itags"># I tags?</button>
        <button id="ctags"># with class foo?</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 log = 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; }'
    });
    //Rendering the Editor
    editor.render('#editor');

    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('b'),
            count = bs.size();

        log(Y.Lang.sub('There {verb} ({count}) B {type} in the inline editor.', {
            verb: count === 1 ? 'is' : 'are',
            count: count,
            type: count === 1 ? 'tag' : 'tags'
        }));
    }, '#btags');

    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('i'),
            count = bs.size();

        log(Y.Lang.sub('There {verb} ({count}) I {type} in the inline editor.', {
            verb: count === 1 ? 'is' : 'are',
            count: count,
            type: count === 1 ? 'tag' : 'tags'
        }));
    }, '#itags');

    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('.foo'),
            count = bs.size();

        log(Y.Lang.sub('There {verb} ({count}) {type} with class foo in the inline editor.', {
            verb: count === 1 ? 'is' : 'are',
            count: count,
            type: count === 1 ? 'item' : 'items'
        }));
    }, '#ctags');

});