Ext.ux.form.HtmlEditor¶ ↑

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.

• Internet Explorer - msdn.microsoft.com/en-us/library/ms533049%28v=VS.85%29.aspx

• Firefox - www.mozilla.org/editor/midas-spec.html

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.

• www.famfamfam.com

• code.google.com/p/fugue-icons

• www.everaldo.com/crystal

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