HtmlEditor Plugin Updates & Fixes
I had the opportunity recently to watch end users interact with my set of ExtJS HtmlEditor Plugins, which brought to my attention some shortcomings with the UI that have now been addressed. Read about the updates below, or go directly to get the updated HtmlEditor Plugins code.
Word Paste
The most exciting change is to how the Word Paste plugin works, which now captures a paste event and can fix the Word garbage without any user interaction. The old UI has been ditched, and replaced with a single toggle button on the HtmlEditor toolbar which turns the functionality on or off. No pop-up window needed.
Form Validation
All of the forms used for inserting now validate their input before allowing the user to insert anything. When the user fills out the form invalidly, they get a squiggly red line (like that of a misspelling in Word). If they try to submit the form with the field still invalid, a "frame" animation effect brings their attention to the invalid field.
Context Activation
Two new features were added that allow the buttons to be enabled or disabled based on text selection, and what tags are present in the selected text or cursor position. This simply means, for example, that the 'Bold' button will be toggled if the selected text, or cursor position has a bold tag in it. To use this feature we just need to enable it.
The second part of this feature set is enabling or disabling a button on text selection, this is used in the Remove Formatting button because it would be silly to have this button enabled if no text was selected.
- enableOnSelection - set to true to enable button only when text is selected.
- disableOnSelection - set to true to disable button only when text is selected.
See how the Remove Formatting button takes advantage of this feature.
Overflow Text
The overflow text used when a toolbar has too many buttons to fit in the width has been added. This was overlooked on my first version of this plugin. Thanks to 'feyyaz' from the ExtJS forums for spotting this.
Conclusion
Hopefully these new features and fixes will prove useful to everyone, and as always, feedback is the only way this plugin set is going to get better, so keep the suggestions coming. Now its time for me to go get some breakfast and a large(ish) cup of coffee. Enjoy!
Ah!
This Overflow option kindof cancels out my question on the plugin page
Very nice solution, thank you.
In the dropdown Overflow menu, my images are handicapped. Is this an issue caused by myself (missing alternate images perhaps?) or is there something else amiss?
The inactive options aren’t readable as well…
It appears that there is a problem with your spacer image. Have you set Ext.BLANK_IMAGE_URL to the url of a spacer gif? Check the FireBug net tab to make sure the spacer image is loaded.
I see from your screenshot that the Word plugin is missing its overflow text, so I fixed that. Thanks.
http://code.google.com/p/ext-ux-htmleditor-plugins/source/detail?r=15
I’m trying out your HTMLEditor plugins, and have come across a stumbling block.
In Ext.ux.form.HtmlEditor.Word for example, I am getting an error whenever I have more than one HTMLEditor on the same page.
I think it’s to do with the scoping in the onRender and onInit. I’m still investigating but was wandering if you had any pointers?
Thanks
Im not having this problem when using two HtmlEditors on the same page.
You’re right.
I had extended the HtmlEditor so that I could register a new xtype that used your plugins, and hadn’t done this properly.
I’m now using:
Ext.ux.form.HtmlEditorWithPlugins = Ext.extend(Ext.form.HtmlEditor, {
initComponent: function() {
this.plugins = [
new Ext.ux.form.HtmlEditor.Word(),
new Ext.ux.form.HtmlEditor.HR(),
new Ext.ux.form.HtmlEditor.IndentOutdent(),
new Ext.ux.form.HtmlEditor.RemoveFormat(),
new Ext.ux.form.HtmlEditor.SpecialCharacters(),
new Ext.ux.form.HtmlEditor.SubSuperScript(),
new Ext.ux.form.HtmlEditor.Table(),
new Ext.ux.form.HtmlEditor.Word()];
Ext.ux.form.HtmlEditorWithPlugins.superclass.initComponent.call(this);
}
});
Ext.reg(‘HtmlEditorWithPlugins’, Ext.ux.form.HtmlEditorWithPlugins);
which works perfectly. Thanks for your help.
You have managed to avoid any questions on your “top secret” button, but I have to ask…
)
It looks like this might have “embed image” capabilities. I understand that this might be complex and you may wish to keep it close to heart, but if this is infact the capabilities of that mystery button would you mind sharing the basic principle behind your solution.
FYIW, I am looking for a solution where the images are stored in a mysql database. The way I envision this working is that when an image is embedded, the file is first uploaded to the server. The server would then respond with a file id that could be used to generate a GET-style link to access the image.
Most of the grunt work is on the server end, but I would appreciate any feedback on your solution (again, assuming that is the top secrete function
I thought it was strange that nobody asked about that. I marked it “Top Secret” as a joke, assuming someone would ask. So thanks for being the person that actually paid attention
You are correct, that is an embed image feature. The reason I have not released that portion of the code is because it is tied in with my clients image management software, making it almost useless without the back-end portion, which cannot be distributed. I took my code and stripped out everything that was specific to my client, making it somewhat generic. The method to actually select an image must be defined. Hope this helps. Enjoy.
http://code.google.com/p/ext-ux-htmleditor-plugins/source/detail?r=20
The Paste from Word button was just what I was looking for! I see your contributions all over the ExtJS community and thought I would let you know it is appreciated.
Thanks Charles, glad I can help.
Any link with example working fine?
I made a checkout from example in http://code.google.com/p/ext-ux-htmleditor-plugins/
But a I have this error:
el.getAttribute is not a function
Response to myself:
The example in the link work fine.
The problem is ExtJS dependency. I was testing with ExtJS 2.2
ext-ux-htmleditor depend of ExtJS 3.x
Woah! We just replied at the exact same time. Jinx!
Sounds like your using an older version of Ext JS that did not include the getAttribute method.
Hi there, i’m currently using your paste from word plug-in, it is great that it catches the ctrl-v event but how can i catch the right-click paste event in the html editor?
Hi, thanks for the set of plugins,
am I correct to take the latest version from
https://github.com/VinylFox/ExtJS.ux.HtmlEditor.Plugins
?
hi Shea,
Excelent work. But you can help me creating a button that justify the text or tell me how can i do that?
Thanks in advice.
I have a complex application and in order to use the HtmlEditor.Word plugin in my extended form, I had to add the following to HtmlEditor.Word.js:
added a namespace at top of file: Ext.ns(‘Ext.ux.form.HtmlEditor’);
and pregistered it at the end:
Ext.preg(‘wordcleanser’, Ext.ux.form.HtmlEditor.Word);
That said, I am super happy with the plugin, thanks!
Hi Shea,
Thanks for this plugin. Excellent work.
I am wondering if anyone ever noticed that Ctrl+V does not work sometimes because the e.ctrlKey is false when it should not. To test it, just release the ctrl in a fraction of sec. before the V. If you make sure the Ctrl is presssed for longer than the time you release the V key all works fine.
I don’t thing it is a problem with your plugin though. I noticed this in other parts while using ExtJs Event Manager.
Because of this problem, I was thinking in fire the ‘cleanse word tags’ by pressing a button instead of Ctrl+V. In other words, I’d like to create a new button ‘Paste from Word’ that would grab the clipboard text and do the cleaning. Can you give me a clue how to achieve this?
Thanks
Leo