ExtJS HtmlEditor Example

ExtJS 1.1 has added a simple WYSIWYG HTML editor. There is an official example and an api reference for the HtmlEditor class but not a simple example of how to turn a simple text area into an HtmlEditor so I thought I'd write one.

You need some imports which you'll need to adjust depending on where you install ext-1.1:

<script type="text/javascript"   src="/ext-1.1/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript"   src="/ext-1.1/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript"   src="/ext-1.1/ext-all.js"></script>
<link rel="stylesheet" type="text/css"   href="/ext-1.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"   href="/ext-1.1/resources/css/xtheme-aero.css" />
<script type="text/javascript"   src="/ext-1.1/ext-base.js"></script>

Then somewhere in the head or even the body of the HTML add this:

<script type="text/javascript" language="text/javascript">
Ext.onReady(function(){
  var editor = new Ext.form.HtmlEditor({id:'note'});
  editor.applyTo('note');
})
</script>

Finally you'll need the form and field which the editor should be applied to:

<form action="/index.py" method="post">
<textarea name="note" id="note" cols="125" rows="20"></textarea>
<br />
<input type="submit" name="go" value="Save" />
</form>

(view source)