Plugin set of additional ExtJS HtmlEditor Buttons
A couple of cups of coffee and a late night fueled by the hatred of the TinyMCE editor prompted me to write a set of Plugins extending the functionality of the ExtJS HtmlEditor.
Home & Stone asked me to integrate the TinyMCE editor into their application, so of course I said yes, knowing that I had done this before and that it generally worked out just fine. Well, three or four days later (its all a blur) having written layers and layers of overrides to the TinyMCE editor, extended or overrode Ext.Panel, Ext.Window, Ext.Updater and so on. I finally said to myself "thats enough, this just isn't worth it" - I can get this done faster and better using ExtJS the way it was meant to be used.
The Outcome
Out of my pain comes a set of plugins that start to mimic what TinyMCE provides, with way less overhead, both in file size and memory.
Currently, these are the plugins that have been created for this set:
- WordPaste
- Divider
- Table
- HR
- IndentOutdent
- SubSuperScript
- RemoveFormat
- MidasCommand
I have posted all of these in a new Google Code project, so feel free to use these in your projects and contribute back any fixes or upgrades you might have along the way.
http://code.google.com/p/ext-ux-htmleditor-plugins/
How to Use Them
First you will need to include the plugin files you want (MidasCommand will need to be included first), then set them up on the HtmlEditor as a Plugin like this:
Thats it! They show up in the toolbar in the order they are added. A Divider can be inserted at any point, and some have dividers built in.
Make Your Own
This whole process brought about the creation of a simple base class used for adding your own Midas commands - Ext.ux.form.HtmlEditor.MidasCommand. This class can be extended and provided a simple config that will create the buttons and their handlers for you.
PS: Im glad to see the trend towards Plugin use in ExtJS, allowing the addition of bits of functionality without conflicting with other functionality, and without having to resort to extending.
Additionally, I want to thank Home & Stone for allowing me to contribute this code back to the community, they have expressed interest in giving back, so im sure we will see more of these types of things being released soon.
Amazing work — it really is easier to just extend ExtJS these days than try to integrate something external. Been finding that out for myself lately, too.
Excellent work dude.
Woot!!
Nice.
Although you do know about Ext.ux.TinyMCE right?
http://extjs.com/forum/showthread.php?t=24787
Yeah, I have used it in the past, and tried to use it on this project, unfortunately it does not work entirely in ExtJS 3.x and requires Ext.ux.ManagedIframePanel, which was another 3k lines of code.
Hello !
I can’t find some downloads in
http://code.google.com/p/ext-ux-htmleditor-plugins/.
Can you help ????????
Greetings Stephan
Go to the ‘Source’ tab, then click the ‘Browse’ link. All of the source files are under the ‘trunk/src’ folder.
Hello…fantastic plugin!!
But I have a questions for you: this plugin is for ExtJS 2.x or for ExtJs 3.0?
This question, because I use ExtJS 2.x and I meet some errors and some unexpected behaviour of editor, so I would ask to you for any solution!
Tnx in advance
These plugins are built for ExtJS 3.x, however they could be used with 2.x by adding the isObject method…
Ext.isObject = function(v){
return v && typeof v == “object”;
}
Tnx for your reply…i’m not a guru of Ext..so cold you make my an example? Where I must use “isObject” method?
That line of code would go somewhere after the inclusion of the ext-all.js file, but before you start creating components.
For instance, you could place it right before your first Ext.onReady
Nice work.
I want to make some additional plugins but i need some way to update the toolbar icon selection based on the current cursor position.It works for the built in buttons (e.g. bold). but its hardcoded in the Htmleditor.updatetoolbar method. Does your plugin provide a way to also get this working for new plugins?
I don’t see it in your plugins when a select a HR element the hr icon doesn’t get selected.
I kinda added the functionality your talking about, however editing html elements that are not simply on or off elements (ie bold is either on or off while hr has attributes) would require some UI creation, which I will likely tackle at a later point.
Updated HtmlEditor Buttons
Nice work. Since I am using Ext GWT, do you have any plan to make this plugin available for Ext GWT HtmlEditor?
Thanks.
Unfortunately I have no experience with Ext GWT, so I wouldn’t have the slightest idea where to start.
My plugin code is freely available to anyone who wants to use it, so im sure if the request to integrate these plugins is made by enough people that Darrell will integrate it into Ext GWT.
still waiting for image plugin like ajaxfilemanager or ibrowser
Hello Shea,
I created a formatblock plugin for the htmleditor. If you would like to include this in your selection I’d be honored. Little caveat: the code is licensed under the LGPL since I took some ideas and code lines from tinymce.
You can find the code here: http://blog.minimeta.de/2009/08/another-plugin-for-the-extjs-htmleditor/
Great work thats looks very good
Awesome plugin.
Though I’m a bit stuck. I’d like the new buttons I create with this plugin to be in a new menubar, as the current one is stuffed already. Is this possible? I’m having troubles finding enough information on ExtJs to figure things like this out (in general sadly, not just now).
Thanks!
A couple of points…
There’s a .css file in the repo at code.google.com that references images that aren’t part of the repo. It would be nice if they were available somehow.
The .css isn’t mentioned in your blog post or on code.google.com. Like in the example usage part.
But awesome work, and your blog is a joy to read.
Great point. I have updated the styles.css file and the Google Code Wiki pages to provide more details. Thanks for your feedback.
What would be nice, and I’d be willing to take a crack at this if/when I get some time, is a button that inserts a “field” or “token” type of object.
Consider an example from Facebook: when you are typing a person’s name to send them a message, once the field knows the profile of the recipient, the text you entered for their name becomes a block of uneditable text. It’s a div or maybe some kind of inline element, and you can only delete it, but not edit it.
The configurable properties of such a plugin would be a template to determine how to generate the inline replacement element, and another template that generates the actual markup that is stored in the field’s value and sent to the server.
Where I imagine this gets tricky is detecting when the user intends to delete the field and then doing The Right Thing.
Awesome idea. You might be able to use the SpecialCharacters plugin as a starting point, since it uses a dataview to display the list of options to select from. If you insert the “token” wrapped by a span and give that span a specific class, then a listener could be added within the plugin for a click event inside the editor area looking for that class and respond accordingly. Good luck, and I would love to post your code in the repo when your at a good point.