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>