DIV container tool

[Frederico Caldeira Knabben]

Currently there is no way to create a <div> which embraces a series of block elements. For example, producing the following output:

<div class="MyDiv">
    <p>Para 1</p>
    <p>Para 2</p>
</div>

The current style system always see <div> as a block element, and therefore, when applying <div> based styles, it converts current blocks to <div>.

The idea would be creating a dedicated button for it. It would behave much like the Blockquote button, but it should have a dialog containing the following fields, basically:

• General Tab:
  • Style: a selection box listing all styles defined for <div> elements in the style system. We should create a reusable component that can be used on other dialogs, for tables, cells, links, etc.
  • Class: the "class" attribute.

• Advanced Tab:
  • Id: the "id" attribute.
  • Inline Style: the "style" attribute.
  • Title: the "title" attribute.
  • Language: the "lang" attribute.
  • Text Direction: a selection for the "dir" attribute.

The only thing still pending to understand is how to edit a previously created <div> and how to delete it. Maybe it is the case to leave the edit and delete operations in the context menu only, while the toolbar button will always create a new <div>, making it possible to nest them.

[Frederico Caldeira Knabben]

I'm targeting it to the 2.6.1 to discuss a bit about it, and check if it is feasible for that version. We can postpone it if needed.

[Alfonso Martínez de Lizarrondo]

In the new version of the EasyUpload plugin (not released, demo with that version available in ​http://martinezdelizarrondo.com/easyupload/) I've replaced all the attributes (except dimensions) with a combo to apply a class, that it's automatically filled from the fckstyles:

// Returns an array with the available classes defined in the Styles
GetAvailableClasses = function (nodeName) {
    var styles = FCK.Styles.GetStyles();
    var aClasses = [{name: "", classname: ""}];
    for (var styleName in styles) {
        var style = styles[styleName];
        if (style.IsCore) {
            continue;
        }
        if (style.Element == nodeName) {
            if (style._StyleDesc.Attributes &&
                style._StyleDesc.Attributes.class) {
                aClasses.push({name: styleName, classname: style._StyleDesc.Attributes.class});
            }
        }
    }
    return aClasses;
}

[Martin Kou]

I've created a new branch at ​https://svn.fckeditor.net/FCKeditor/branches/features/div_container/ for this. Currently the new dialog is only able to add new div containers, no edit or delete capabilities yet.

[Frederico Caldeira Knabben]

• Right clicking on the white space at the right side of contained paragraphs will not display the context menu options for the div.

• The above is also true when clicking the white space between paragraphs with Show Blocks enabled.

• The tooltip for the toolbar button is "Blockquote". It should be "Create Div Container".

• I've created following two test styles. No matter which style is used in the div, style "B" is always selected in the edit dialog.

<Style name="A" element="div">
	<Style name="background-color" value="Yellow" />
	<Style name="border" value="1px solid red" />
</Style>

<Style name="B" element="div">
	<Style name="border" value="5px solid blue" />
</Style>

For discussion:

• Let's call it "Div Container", instead of "Div Tag"? A "container" is more explicit on saying that it will hold other things. A "div tag" can be used as a container but also as a simple block element, which may cause some confusion.

• The dialog title should be "Create ...", instead of "Insert ...".

• For cross-blocks selections, I'm a bit unsure about the expected behavior. Check out ​this pastebin note.

• The toolbar button will not have an on/off state like we have for blockquote. Being the div creation exclusively done by the dialog box, couldn't we have the creation code in the dialog file itself instead of having a command for it? It would help us having the core code a bit smaller.

Tested it with Firefox 3 on Windows.

[Martin Kou]

Ok, I've updated the code which fixes the bugs and supports multiple <div> creation and selection.

[Frederico Caldeira Knabben]

Overall the current implementation is quite good. I don't like the fact of using FCKDomTools to hold such stuff, but I understand that there are no other places for it. Fortunately V3 will make some order on it.

As already pointed to you Martin, the only flaw I I've found is the following: ​http://screencast.com/t/8wAqb8dGZYi

Having that fixed is the last task for this code to land the trunk.

[Frederico Caldeira Knabben]

There is a critical bug with IE... it enters in an infinite loop with the following TC:
​http://screencast.com/t/8wAqb8dGZYi

[Frederico Caldeira Knabben]

Ok.. Martin came with several fixes at the branch. Everything looks good now.

[Martin Kou]

Fixed with [2209].