ExtJS HtmlEditor Example
+++++++++++++++++++++++++++

:Posted: 2007-08-15 14:46
:Tags: JavaScript

ExtJS 1.1 has added a simple WYSIWYG HTML editor. There is an official `example <http://extjs.com/deploy/ext/examples/form/dynamic.html>`_ and an `api reference <http://extjs.com/deploy/ext/docs/output/Ext.form.HtmlEditor.html>`_ 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>