Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A set of Plugins that add features to the Ext JS HtmlEditor (MIT Licensed)

branch: master
README.rdoc

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.

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

Something went wrong with that request. Please try again.