[Solved][3.0RC1] HtmlEditor and midas 'indent' cmd

[alloftheabove]

EDIT: I was having a problem with Ext.form.HtmlEditor in relation to the midas 'indent' command. I had extended HtmlEditor to add more features (undo, redo, indent, etc), and I had created an 'indent' button and an 'outdent' button. The problem was that when I clicked the 'indent' button twice, the caret (blinking vert. line thing) would move to the second row, while keeping the indent level correct. After a while, I found that the 'indent' button was actually inserting blockquotes instead a div with inline margin style declaration. This was frustrating, and after several hours of looking at a list of midas commands and looking through the source code of Ext.form.HtmlEditor, I realized what the problem really was. See my third post, below, for the solution.

[alloftheabove]

The contents of this post have been hidden by the poster. See the post below.

[alloftheabove]

Here is the problem, in the Ext.form.HtmlEditor source, on lines 730-733:

            try{
                this.execCmd('useCSS', true);
                this.execCmd('styleWithCSS', false);
            }catch(e){}

The issue is in using the deprecated midas command 'useCSS'. This is not supported (from what I've seen) in Firefox 3.0.x, which therefore caused the 'indent' command to use blockquotes instead of a div with an inline style declaration. I do not consider this an acceptable behavior for this widget. The formatting of a page should be done in the styling of the page (css), not in the structure of the page (html).

What fixes the problem for both Firefox 3.0+ (maybe 2.0+) and Internet Explorer 7+ (maybe 6+), is using the 'styleWithCSS' command (value = true, not false), instead of the deprecated/defunct 'useCSS' command.

[stever]

You might want to look at the source code for tinyMCE. You'll notice that they don't rely on the browser for indent/outdent, likely a reason why it is missing from the lightweight one in Ext.

I rewrote parts of HtmlEditor for Ext3, by the way, to use plugins for all toolbar items, to use a BaseIFrame editor (for HtmlEditor and CodePress), and for having the toolbar work as normal, use the button group stylings, and/or float. I ought to post some info about that... Also fixed a group of bugs related to the HtmlEditor's css and some toolbar bugs that came up. Did you write your new indent/outdent code yourself? Perhaps we can share offline..

[alloftheabove]

You mean did I write the code I showed above? Yes. EDIT: Oops, I forgot I cleared that off. Sorry.

I simply created a new toolbar button called 'indent', which obviously calls the equivalent midas command when clicked.

I ended up creating my own version, in which I was able to completely rewrite the toolbar - so I could place what I wanted where I wanted. If you would like, I could show you a few screenshots of what it looks like, as well as giving the code. Note that I did not rewrite the iframe code. It was basically *a bunch* of new cfg, and corresponding menu items/buttons. I kept the items that need to be toggled in toolbar buttons, as well as the fontSelect, and undo/redo buttons. Stuff that you would insert into the document (paragraphs, horizontal rules, blockquotes, headings, etc) were moved into an insert menu. Cut, Copy, and Paste were moved into a 'file' menu (although they are automatically disabled by cfg), as well as Save as Draft and Publish (obviously, I had other plans for it). The Save as Draft and Publish items need to have functions passed to them in order to work (thus saveAction and publishAction cfg).

I didn't know about plugins for the toolbar items...

I haven't actually looked at the tinyMCE code, I have tried to look at the code for Editarea. When I have time, I think I will give tinyMCE a good looking over.

[stever]

I erased the HtmlEditor from getting built in my version of Ext and made my own based off it. Here is what the class/file structure looks like:

• BaseIFrameEditor.js
  
  • HtmlEditor.js
  • CodePressEditor.js
• HtmlEditorPlugin.js
  
  • HtmlEditorPluginStandard.js
  • HtmlEditorPluginLink.js
  • HtmlEditorPluginImage.js
  • HtmlEditorPluginSmileys.js

And i register some xtypes like this:

Ext.reg('htmleditor', Ext.extend(Ext.ux.HtmlEditor,{
	tbRows:1,
	tbTitles:false,
	tbFloat:false,
	plugins: [{
		ptype:'htmlstandard'
	},{
		ptype:'htmllink'
	},{
		ptype:'htmlsmileys'
	},{
		ptype:'htmlimage'
	}]
});

Ext.reg('floathtmleditor', Ext.extend(Ext.ux.HtmlEditor,{
	tbRows:1,
	tbTitles:true,
	tbFloat:true,
	plugins: [{
		ptype:'htmlstandard'
	},{
		ptype:'htmllink'
	},{
		ptype:'htmlsmileys'
	},{
		ptype:'htmlimage'
	}]
});

Ext.reg('basichtmleditor',Ext.extend(Ext.ux.HtmlEditor,{
	tbRows:1,
	tbTitles:false,
	tbFloat:false,
	plugins: [{
		ptype:'htmlstandard',
		toolbarPane: {
			font: ['fontstyle']
		}
	}],
	toolbarPanes:'font'
}));

Ext.reg('ribbonhtmleditor',Ext.extend(Ext.ux.HtmlEditor,{
	tbRows:3,
	tbTitles:true,
	tbFloat:false,
	plugins: [{
		ptype:'htmlstandard'
	},{
		ptype:'htmllink'
	},{
		ptype:'htmlsmileys'
	},{
		ptype:'htmlimage'
	}]
}));

With the concept being that there are toolbarPanes like 'font' that contain all the font related stuff. The font pane has several button groups: 'fontface','fontsize','fontstyle','fontcolor'. The 'fontstyle' group has 'bold','italic','underline', etc. So a plugin has a function that registers where its buttons go (toolbar pane and button group). The editor automatically handles merging, separators, etc.

The overflow looks nice too (works the same with the titles part off), and even slightly enhances the current justify setting, for example. We also added in the ability to float the toolbar.