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.
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"> |
4 | This is some more test text.<br>This is some more test text.<br>This is some more test text.<br> |
5 | This 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 | ? |
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 | ? |
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.
1 | var myEditor = new YAHOO.widget.Editor('editor', myConfig); |
2 | myEditor.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 | }, this, true); |
15 | }, myEditor, true); |
16 | myEditor.render(); |
view plain | print | ? |
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-image: url( assets/html_editor.gif ); |
3 | background-position: 0 1px; |
4 | left: 5px; |
5 | } |
6 | .yui-skin-sam .yui-toolbar-container .yui-button-editcode-selected span.yui-toolbar-icon { |
7 | background-image: url( assets/html_editor.gif ); |
8 | background-position: 0 1px; |
9 | left: 5px; |
10 | } |
view plain | print | ? |
1 | myEditor.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 | }, this, true); |
11 | }, myEditor, true); |
view plain | print | ? |
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 | visibility: hidden; |
3 | top: -9999px; |
4 | left: -9999px; |
5 | position: absolute; |
6 | } |
7 | textarea { |
8 | border: 0; |
9 | margin: 0; |
10 | padding: 0; |
11 | } |
view plain | print | ? |
1 | //Somewhere above the Editor code |
2 | var state = 'off'; |
3 | YAHOO.log('Set state to off..', 'info', 'example'); |
4 | |
5 | |
6 | //Inside the toolbarLoaded event |
7 | this.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 | }, this, true); |
view plain | print | ? |
Using the new cleanHTML
event, we will set the value of the textarea
each time we call this.saveHTML()
1 | this.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 | }, this, true); |
6 | }, myEditor, true); |
view plain | print | ? |
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 | }, this, true); |
58 | |
59 | this.on('cleanHTML', function(ev) { |
60 | YAHOO.log('cleanHTML callback fired..', 'info', 'example'); |
61 | this.get('element').value = ev.html; |
62 | }, this, true); |
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 | }, this, true); |
76 | }, myEditor, true); |
77 | myEditor.render(); |
78 | |
79 | })(); |
view plain | print | ? |
Note: Logging and debugging is currently turned off for this example.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings