YUI: Editor Example

This example shows how to create an element from a selection and then modify that newly created element.

The Javascript

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        myEditor = null;

myEditor = new YAHOO.widget.Editor('editor', {
            height: '300px',
            width: '522px',
            dompath: true,
            animate: true
        });
        myEditor.on('editorKeyDown', function(ev) {
            if (((ev.ev.keyCode == 82) || (ev.ev.keyCode == 98)) && (ev.ev.ctrlKey)) {
                this._createCurrentElement('span');
                var el = this.currentElement[0];
                var _span1 = this._getDoc().createElement('span');
                _span1.innerHTML = '‡_';
                _span1.className = 'subfield-delimiter';
                var _span2 = this._getDoc().createElement('span');
                _span2.innerHTML = el.innerHTML;
                _span2.className = 'subfield';
                el.innerHTML = '';
                el.appendChild(_span1);
                el.appendChild(_span2);
                alert('Now you can access that element via, myEditor.currentElement[0]');
            }
            
        }, myEditor, true);
        myEditor.render();
})();

YUI: Another Editor Example

The Javascript