HtmlEditor & Toolbar Extended for Extensibility

I have created new extensions to the Ext.form.HtmlEditor and Ext.Toolbar components that I believe are better suited for handling plugins. As Jack et al have commented that the HtmlEditor was designed to be 'lightweight', it follows that the tool should at least be fit for the easy integration of plugins. I found it wasn't, so I have extended it to cater for them.

The code attached is only a suggestion of the way the editor should function in future. I'm open to anyone suggesting it should work another way. Use it if you feel it is of value, or not, if you don't.

I'll start with the toolbar. I called it Ext.ux.HTMLEditorToolbar, as I felt that the regular toolbar worked sufficiently for non-editor needs, so I wrote this one solely with the editor in mind.

The main problem with the existing toolbar was that the editor added the tools directly into it, both sequentially and at the time of render. I wanted the tools to be added prior to the toolbar being rendered. I also wanted the tools to be inserted, if needed, rather than just added to the end.

I also added a new component to the toolbar to handle comboboxes. The existing fontnames combobox could only be created at the time of render, so adding a new component meant that I could configure it in memory prior to it being rendered to the toolbar.

Now, to the HtmlEditor. I have called the extended version Ext.ux.HTMLEditor. It has changed significantly.

I no longer use the enable... flags to include the tools, but use an array, called toolbarItems, that can be overwritten in the config file (I also included a config array called toolbarItemExcludes, as an alternative, to exclude tools contained in the standard toolbarItems array). Using this array means that you can display the tools in any order.

Once the editor is initialized, the toolbar will have all the tools configured, meaning that any plugins can then manipulate the tools list by adding or inserting new tools as needed. This can all happen prior to the toolbar being rendered.

Top Notch

Hi Ralf. You made the mod perfectly. I would have done it the same way!

NOTE: I had never previously discovered a best practice way to coding in javascript, so my code, up until this point, was pretty much just thrown together. Since discovering this great article in the Community Manual on Basic Application Design (see http://extjs.com/learn/Manual:Basic_Application_Design), I've decided to code all my scripts using this format (ie, separating private from public functions). Because of this, the HTMLEditorStyles script, included in the first post above, has changed. If you wish to view the old code to understand Ralf's comments above then please see the old HTMLEditorStyles version below.

When you get enough buttons on the toolbar, you really want to make the toolbar two rows, so you can fit then in a smallish window neatly. Or to organize the buttons by functions.

For an example, just look at this message board's Reply to Thread editor - it has two rows of buttons - one with font selection/size, etc., on the top row, the bottom row has bold, italics, etc.

The simple editor is sufficient to do almost all things, since you can directly edit the HTML, but if people want to really turn this into something more advanced for their purpose/applications, they might want to add "create table," "choose style (h1, h2, etc.)," "insert video," "insert smilie," and several other buttons...

I figure as long as you've extended the HTMLEditor toolbar class, you might want to take my suggestions into consideration.

There is work going on now to make all toolbars into containers. Then you could have a single-line layout, two-line layout, ribbon-layout, etc. I think it would be worth waiting to see if that gets put into the main Ext codebase, since that would make this a lot easier...

I've been examining the code closely and the undo/redo plugin references the editor.tb toolbar directly. Are you concerned that turning everything into containers is going to break a lot of code like I just mentioned?