A set of Plugins that add features to the Ext JS HtmlEditor (MIT Licensed)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



This is a set of plugins for the ExtJS HtmlEditor that add more advanced HTML editing capabilities. Learn more about these plugins on my blog post about them.

Currently, these are the plugins that have been created for this set:

  • WordPaste (Removes garbage when pasting text from Word)

  • Divider (divider between buttons, not an HR)

  • Table

  • HR (now this is an HR)

  • IndentOutdent

  • SubSuperScript

  • RemoveFormat

  • MidasCommand (Base class to extend midas commands from)

  • SpecialCharacters

  • HeadingButtons & HeadingMenu (H1, H2, Etc.)

  • Font (Experimental - problems in IE)

Example Usage


	xtype: 'htmleditor',
	plugins: [
	        new Ext.ux.form.HtmlEditor.Word(),  
	        new Ext.ux.form.HtmlEditor.Divider(),  
	        new Ext.ux.form.HtmlEditor.Table(),  
	        new Ext.ux.form.HtmlEditor.HR(),  
	        new Ext.ux.form.HtmlEditor.IndentOutdent(),  
	        new Ext.ux.form.HtmlEditor.SubSuperScript(),  
	        new Ext.ux.form.HtmlEditor.RemoveFormat() 


Create Your Own Midas Commands

By extending the MidasCommand class, you can create buttons that execute standard midas commands with one optional argument.

Ext.ux.form.HtmlEditor.H1 = Ext.extend(Ext.ux.form.HtmlEditor.MidasCommand, { midasBtns: ['|', { enableOnSelection: true, cmd: 'formatblock', value: '<h1>', tooltip: { title: '1st Heading' }, overflowText: '1st Heading' }] });

The 'cmd' or command will be one of the standard Midas commands, which can vary by browser. See the lists below for details.

Some of the Midas commands require an argument, or value, which can be defined in the 'value' property.

See the 'Button Icons' section below for adding icons to buttons created from the MidasCommand class.

Button Icons

The icons used for each of the buttons is not provided as part of this plugin, they must be acquired separately. An example of the CSS needed for each buttons icon is provided in the styles.css file located in the src folder. Here is an example style for the table button icon.

.x-edit-table {background: url(../images/table.png) 0 0 no-repeat !important;}

The style name is generated from the midas command name which can be found in the cmd property of the plugin. In the case of non midas commands, the onRender handler of the plugin has a reference to the iconCls name used.

For nice icon sets, check out the following sites.

Code released under the MIT license: www.opensource.org/licenses/mit-license.php