vinylfox / extjs.ux.htmleditor.plugins

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

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

extjs.ux.htmleditor.plugins's Issues

Image plugin doesn't work

Hi,
Your plugins really pretty. But Image plugin doesn't work.When I press on it, it do absolutely nothing.

Link Plugin causes problems in IE

Hello,

I am using some of these nice plugins but I am struggling to get the Link plugin to work correctly cross browser.

First the function getSelectedText() does not exist but that was easy. So the getSelectedText() works fine now cross browser (inc. IE6 - IE9).
Problem is when inserting the link back at cursor in IE. In IE the selected text does not stay selected when you focus another window.

So when insertAtCursor() is called, in IE this provides for great difficulties because the selected text is no longer selected so the insert will occur but the selected text will be there twice. (once without the newly created link and once without which is the original text)

I was wondering if you ever had the same question(s) and if there is a bypass for this issue.
A workaround for me in IE9 is to remove the selectedText when first opening the "Insert Link" form. If cancel is pressed the normal text will get back inserted while when insert is pressed the link will get inserted correctly.

This still does not give me a correct usage when no pre-selected text is used or with selected text in IE6 - IE8.

Hope to hear from you with some kind of solution...

Best regards,
Joeri.