The obvious next choice for a button was to add a character map which allows the user to insert special characters.

How it Works

The character map is just a DataView in a window which allows selection of each item. By double clicking on an item, a single character can be inserted or we can select a single item or multiple items using the ctrl or shift keys and click the ‘Insert’ button.

Using it

Just like the other plugins in this set, it can be added to the plugins array of your HtmlEditor.

{<br /> xtype: ‘htmleditor’,<br /> …,<br /> plugins: [new Ext.ux.form.HtmlEditor.SpecialCharacters()],<br /> …<br /> }

I also created a couple of configs that allow you to specify which characters you want displayed, along with any additional characters. Both of the following configs use the numeric portion of the ASCII HTML Character Code only – for example, to use the Copyright symbol, which is &#169; we would just specify 169 in the config.

If we wanted to only display a subset of characters, we would set the value of the charRange config to an array containing the starting and ending points of the characters we wanted.

{<br /> xtype: ‘htmleditor’,<br /> …,<br /> plugins: [new Ext.ux.form.HtmlEditor.SpecialCharacters({<br /> charRange: [192,256] // Accented characters only<br /> })],<br /> …<br /> }

There is also the option to include additional characters using the specialChars config, providing an array of the characters.

{<br /> xtype: ‘htmleditor’,<br /> …,<br /> plugins: [new Ext.ux.form.HtmlEditor.SpecialCharacters({<br /> specialChars: [42,43,45,47,60,61,62] // Math operator characters<br /> })],<br /> …<br /> }

Enjoy!

As always, please enjoy this plugin and feel free to use it wherever you want. Feedback is very appreciated.

Source available on Google Code: http://code.google.com/p/ext-ux-htmleditor-plugins/