YUI Library Examples: Rich Text Editor (beta): Code Editor

Rich Text Editor (beta): Code Editor

This example demonstrates how to create a Code Editor using the Rich Text Editor. As you begin typing, you're in a standard Editor space. But if you click on the "code icon" &mdash the rightmost icon on the second row — you can begin using HTML markup. When you toggle the code editing mode back off, you'll see rich text formatted with your HTML.

This text field can contain stylized text and graphics. To cycle through all formatting options, use the keyboard shortcut Control + Shift + T to place focus on the toolbar and navigate between option heading names.

Common formatting keyboard shortcuts:

  • Control Shift B sets text to bold
  • Control Shift I sets text to italic
  • Control Shift U underlines text
  • Control Shift [ aligns text left
  • Control Shift | centers text
  • Control Shift ] aligns text right
  • Control Shift L adds an HTML link
  • To exit this text editor use the keyboard shortcut Control + Shift + ESC.
body

You have left the Rich Text Editor.

Setting up the Editors HTML

Setting up the Editor's HTML is done by creating a textarea control on the page.

1<button type="button" id="toggleEditor">Toggle Editor</button> 
2<form method="post" action="#" id="form1"
3<textarea id="editor" name="editor" rows="20" cols="75"
4This is some more test text.<br>This is some more test text.<br>This is some more test text.<br> 
5This is some more test text.<br>This is some more test text.<br>This is some more test text. 
6</textarea> 
7</form> 
view plain | print | ?

Setting up the Editors Javascript

Once the textarea is on the page, then initialize the Editor like this:

1(function() { 
2    //Setup some private variables 
3    var Dom = YAHOO.util.Dom, 
4        Event = YAHOO.util.Event; 
5 
6        //The Editor config 
7        var myConfig = { 
8            height: '300px'
9            width: '530px'
10            animate: true
11            dompath: true
12            focusAtStart: true 
13        }; 
14 
15    //Now let's load the Editor.. 
16    var myEditor = new YAHOO.widget.Editor('editor', myConfig); 
17    myEditor.render(); 
18})(); 
view plain | print | ?

Getting the textarea in new place

By default the RTE places the textarea inside the Editor's parent, but for this example we need it as a sibling of the iframe.

So, we will subscribe to the Editor's afterRender event and move it around.

1var myEditor = new YAHOO.widget.Editor('editor', myConfig); 
2myEditor.on('toolbarLoaded'function() { 
3    this.on('afterRender'function() { 
4        var wrapper = this.get('editor_wrapper'); 
5        wrapper.appendChild(this.get('element')); 
6        this.setStyle('width''100%'); 
7        this.setStyle('height''100%'); 
8        this.setStyle('visibility'''); 
9        this.setStyle('top'''); 
10        this.setStyle('left'''); 
11        this.setStyle('position'''); 
12 
13        this.addClass('editor-hidden'); 
14    }, thistrue); 
15}, myEditor, true); 
16myEditor.render(); 
view plain | print | ?

Add our new button

Now we need to add our new Code Editor button. We do this by setting up a new ToolbarButton config and adding it to the toolbar with the Toolbar's addButtonToGroup method.

1.yui-skin-sam .yui-toolbar-container .yui-toolbar-editcode span.yui-toolbar-icon { 
2    background-imageurl( assets/html_editor.gif ); 
3    background-position0 1px
4    left5px
5} 
6.yui-skin-sam .yui-toolbar-container .yui-button-editcode-selected span.yui-toolbar-icon { 
7    background-imageurl( assets/html_editor.gif ); 
8    background-position0 1px
9    left5px
10} 
view plain | print | ?
1myEditor.on('toolbarLoaded'function() { 
2    var codeConfig = { 
3        type: 'push', label: 'Edit HTML Code', value: 'editcode' 
4    }; 
5    YAHOO.log('Create the (editcode) Button''info''example'); 
6    this.toolbar.addButtonToGroup(codeConfig, 'insertitem'); 
7 
8    this.on('afterRender'function() { 
9        //snipped 
10    }, thistrue); 
11}, myEditor, true); 
view plain | print | ?

Now we handle what happens when we click that button

Starting by listening for the editorcodeClick event, we judge what state the code editor is in by the state var and act as needed.

If the state is off (the default) the we will set it to on, then fire the cleanHTML method (to tidy up the HTML in the Editor). Now we add the class editor-hidden to the iframe and remove it from the textarea. This will hide the Editor's iframe and show the textarea.

Then we will disable the Editor's toolbar with a call to this.toolbar.set('disabled', true). Now we will set the codeeditor button back to enabled by calling this.toolbar.getButtonByValue('editcode').set('disabled', false), then select it with the selectButton method.

Now, the next time the button is clicked we will reverse the process.

1.editor-hidden { 
2    visibilityhidden
3    top-9999px
4    left-9999px
5    positionabsolute
6} 
7textarea { 
8    border0
9    margin0
10    padding0
11} 
view plain | print | ?
1//Somewhere above the Editor code 
2var state = 'off'
3YAHOO.log('Set state to off..''info''example'); 
4 
5 
6//Inside the toolbarLoaded event 
7this.toolbar.on('editcodeClick'function() { 
8    var ta = this.get('element'), 
9        iframe = this.get('iframe').get('element'); 
10 
11    if (state == 'on') { 
12        state = 'off'
13        this.toolbar.set('disabled'false); 
14        YAHOO.log('Show the Editor''info''example'); 
15        YAHOO.log('Inject the HTML from the textarea into the editor''info''example'); 
16        this.setEditorHTML(ta.value); 
17        if (!this.browser.ie) { 
18            this._setDesignMode('on'); 
19        } 
20 
21        Dom.removeClass(iframe, 'editor-hidden'); 
22        Dom.addClass(ta, 'editor-hidden'); 
23        this.show(); 
24        this._focusWindow(); 
25    } else { 
26        state = 'on'
27        YAHOO.log('Show the Code Editor''info''example'); 
28        this.cleanHTML(); 
29        YAHOO.log('Save the Editors HTML''info''example'); 
30        Dom.addClass(iframe, 'editor-hidden'); 
31        Dom.removeClass(ta, 'editor-hidden'); 
32        this.toolbar.set('disabled'true); 
33        this.toolbar.getButtonByValue('editcode').set('disabled'false); 
34        this.toolbar.selectButton('editcode'); 
35        this.dompath.innerHTML = 'Editing HTML Code'
36        this.hide(); 
37    } 
38    return false
39}, thistrue); 
view plain | print | ?

Putting the HTML into the textarea

Using the new cleanHTML event, we will set the value of the textarea each time we call this.saveHTML()

1this.toolbar.on('editcodeClick'function() { 
2    this.on('cleanHTML'function(ev) { 
3        YAHOO.log('cleanHTML callback fired..''info''example'); 
4        this.get('element').value = ev.html; 
5    }, thistrue); 
6}, myEditor, true); 
view plain | print | ?

Full Example Javascript Source

1(function() { 
2    var Dom = YAHOO.util.Dom, 
3        Event = YAHOO.util.Event; 
4     
5    var myConfig = { 
6        height: '300px'
7        width: '530px'
8        animate: true
9        dompath: true
10        focusAtStart: true 
11    }; 
12 
13    var state = 'off'
14    YAHOO.log('Set state to off..''info''example'); 
15 
16    YAHOO.log('Create the Editor..''info''example'); 
17    var myEditor = new YAHOO.widget.Editor('editor', myConfig); 
18    myEditor.on('toolbarLoaded'function() { 
19        var codeConfig = { 
20            type: 'push', label: 'Edit HTML Code', value: 'editcode' 
21        }; 
22        YAHOO.log('Create the (editcode) Button''info''example'); 
23        this.toolbar.addButtonToGroup(codeConfig, 'insertitem'); 
24         
25        this.toolbar.on('editcodeClick'function() { 
26            var ta = this.get('element'), 
27                iframe = this.get('iframe').get('element'); 
28 
29            if (state == 'on') { 
30                state = 'off'
31                this.toolbar.set('disabled'false); 
32                YAHOO.log('Show the Editor''info''example'); 
33                YAHOO.log('Inject the HTML from the textarea into the editor''info''example'); 
34                this.setEditorHTML(ta.value); 
35                if (!this.browser.ie) { 
36                    this._setDesignMode('on'); 
37                } 
38 
39                Dom.removeClass(iframe, 'editor-hidden'); 
40                Dom.addClass(ta, 'editor-hidden'); 
41                this.show(); 
42                this._focusWindow(); 
43            } else { 
44                state = 'on'
45                YAHOO.log('Show the Code Editor''info''example'); 
46                this.cleanHTML(); 
47                YAHOO.log('Save the Editors HTML''info''example'); 
48                Dom.addClass(iframe, 'editor-hidden'); 
49                Dom.removeClass(ta, 'editor-hidden'); 
50                this.toolbar.set('disabled'true); 
51                this.toolbar.getButtonByValue('editcode').set('disabled'false); 
52                this.toolbar.selectButton('editcode'); 
53                this.dompath.innerHTML = 'Editing HTML Code'
54                this.hide(); 
55            } 
56            return false
57        }, thistrue); 
58 
59        this.on('cleanHTML'function(ev) { 
60            YAHOO.log('cleanHTML callback fired..''info''example'); 
61            this.get('element').value = ev.html; 
62        }, thistrue); 
63         
64        this.on('afterRender'function() { 
65            var wrapper = this.get('editor_wrapper'); 
66            wrapper.appendChild(this.get('element')); 
67            this.setStyle('width''100%'); 
68            this.setStyle('height''100%'); 
69            this.setStyle('visibility'''); 
70            this.setStyle('top'''); 
71            this.setStyle('left'''); 
72            this.setStyle('position'''); 
73 
74            this.addClass('editor-hidden'); 
75        }, thistrue); 
76    }, myEditor, true); 
77    myEditor.render(); 
78 
79})(); 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

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