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.
textarea is on the page, then initialize the Editor like this:
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.
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
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
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
Now, the next time the button is clicked we will reverse the process.
Using the new
cleanHTML event, we will set the value of the
textarea each time we call
Note: Logging and debugging is currently turned off for this example.