Ext.ux.form.HtmlEditor.Plugins

**VinylFox** · 22 Jun 2009 1:55 PM

This is a set of plugins that add to the HTML editing functionality of the HtmlEditor Component. There is also a base class thats easily extended or configured to add standard Midas commands that don't require a 3rd argument.

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

SpecialCharacters (Character Map)
WordPaste
Divider
Table
HR
IndentOutdent
SubSuperScript
RemoveFormat
MidasCommand
Heading
Font (experimental)

For more info, see the blog post(s) about it.
http://www.vinylfox.com/plugin-set-f...ditor-buttons/
http://www.vinylfox.com/plugin-set-f...-charactermap/
All the code can be found on Github. Also check out the README on Github.
http://github.com/VinylFox/ExtJS.ux.HtmlEditor.Plugins
Limited mirroring of updates on Google Code's SVN.
http://code.google.com/p/ext-ux-htmleditor-plugins/

Enjoy! and please feel free to suggest changes and fixes here.

**mprice** · 22 Jun 2009 6:06 PM

Shea - this is great! I was also looking at TinyMCE as a more robust solution than the out-of-the-box html editor, but your plugins meet most of the needs. Love the MidasCommand "base class" concept. I pulled down the .js files and dropped them in to my 2.2.1 test area and included them in the dynamic form example per your instructions on your blog. But I got some strange results when loading up in FF. The editor appears to duplicate:

temp.jpg

I included the .js files in examples/form/dynamic.html as follows:

HTML Code:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Forms</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>

    <script type="text/javascript" src="states.js"></script>
    <script type="text/javascript" src="dynamic.js"></script>
    <link rel="stylesheet" type="text/css" href="forms.css"/>

    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css"/>

    <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.MidasCommand.js"></script>
    <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.Divider.js"></script>
    <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.HR.js"></script>
    <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.IndentOutdent.js"></script>
    <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.RemoveFormat.js"></script>
    <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.SubSuperScript.js"></script>
    <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.Table.js"></script>
    <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.Word.js"></script>

</head>

and added the plugins to the examples/form/dynamic.js file as follows:

Code:

xtype:'htmleditor',
id:'bio',
fieldLabel:'Biography',
height:200,
anchor:'98%',
plugins: [
    new Ext.ux.form.HtmlEditor.Divider(),
    new Ext.ux.form.HtmlEditor.Word(),  
    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() 
]

**VinylFox** · 22 Jun 2009 6:18 PM

Originally Posted by mprice

... pulled down the .js files and dropped them in to my 2.2.1 test area ...

These were developed on the 3.x branch.

If I remember right, 2.2.1 does not have Ext.isObject, which is used in my code. That is one area these plugins will fail at. Not sure what else might be specific to 3.x.

**mprice** · 22 Jun 2009 6:38 PM

Gotcha. Ran in 3.0 RC2, and only had one issue with the following line in the Table and HR classes:

Code:

animateTarget: btn.getEl(),

Firebug says:

Code:

btn is undefined
handler()()
DomHelper()(Object browserEvent=Event blur button=-1 type=blur)
A()
animateTarget: btn.getEl(),

If I commented this line out, worked just fine.

**VinylFox** · 22 Jun 2009 7:03 PM

Originally Posted by mprice

...If I commented this line out, worked just fine.

I didn't really like the window animation anyway, so I just removed that from my code and committed. Not sure why it would fail like that though. Thanks for the testing and feedback. Let me know if you find anything else.

**VinylFox** · 13 Jul 2009 3:28 AM

I have added a character map button, which pops up a window allowing you to select special characters from a view.

Updated the google code SVN with this new code.

**irina** · 13 Jul 2009 6:54 AM

Hi,
I got this plugin form SVN, but there are only .js files. It works for me but there are no icons. How could I get images for buttons?
Thank you very much,
Irina

**VinylFox** · 13 Jul 2009 7:06 AM

The icons are up to you to implement, I typically snag a few I like from the many open source icon sets that are out there...

http://www.famfamfam.com/
http://code.google.com/p/fugue-icons/
http://www.everaldo.com/crystal/

Enjoy

**irina** · 13 Jul 2009 7:08 AM

Ok, got it, thanks a lot for good icons resources.

**VinylFox** · 13 Jul 2009 7:16 AM

Also, I should mention that the 'style.css' file that is up on the code repo has some examples. The styles basically use the midas command name as the css name with '.x-edit-' pre-pended to it. For example:

Code:

.x-edit-outdent {background: url(../images/edit-outdent.png) 0 0 no-repeat !important;}
.x-edit-subscript {background: url(../images/text_sub.png) 0 0 no-repeat !important;}
.x-edit-superscript {background: url(../images/text_super.png) 0 0 no-repeat !important;}
.x-edit-removeFormat {background: url(../images/exclamation.png) 0 0 no-repeat !important;}

In that first style 'outdent' is the midas command, so that button will use '.x-edit-outdent' as the style name. Etc.

Ext.ux.form.HtmlEditor.Plugins

Thread Tools

Search Thread

Display

Ext.ux.form.HtmlEditor.Plugins

Ext.ux.form.HtmlEditor.Plugins