Opened 8 years ago

Closed 8 years ago

Last modified 6 years ago

#2234 closed New Feature (fixed)

DIV container tool

Reported by: fredck Owned by: martinkou
Priority: Normal Milestone: FCKeditor 2.6.3
Component: General Version:
Keywords: Confirmed Review+ Cc:


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>

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.

Change History (13)

comment:1 Changed 8 years ago by fredck

  • Milestone set to FCKeditor 2.6.1

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.

comment:2 Changed 8 years ago by martinkou

  • Owner set to martinkou
  • Status changed from new to assigned

comment:3 Changed 8 years ago by alfonsoml

In the new version of the EasyUpload plugin (not released, demo with that version available in 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) {
        if (style.Element == nodeName) {
            if (style._StyleDesc.Attributes &&
                style._StyleDesc.Attributes.class) {
                aClasses.push({name: styleName, classname: style._StyleDesc.Attributes.class});
    return aClasses;

comment:4 Changed 8 years ago by martinkou

I've created a new branch at for this. Currently the new dialog is only able to add new div containers, no edit or delete capabilities yet.

comment:5 Changed 8 years ago by martinkou

  • Keywords Review? added

comment:6 Changed 8 years ago by fredck

  • Keywords Review- added; Review? removed
  • 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 name="B" element="div">
	<Style name="border" value="5px solid blue" />

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.

comment:7 Changed 8 years ago by martinkou

  • Keywords Review? added; Review- removed

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

comment:8 Changed 8 years ago by fredck

  • Keywords Review- added; Review? removed

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:

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

comment:9 Changed 8 years ago by martinkou

  • Keywords Review? added; Review- removed

comment:10 Changed 8 years ago by fredck

  • Keywords Review+ added; Review? removed

comment:11 Changed 8 years ago by fredck

  • Keywords Review- added; Review+ removed

There is a critical bug with IE... it enters in an infinite loop with the following TC:

comment:12 Changed 8 years ago by fredck

  • Keywords Review+ added; Review- removed

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

comment:13 Changed 8 years ago by martinkou

  • Resolution set to fixed
  • Status changed from assigned to closed

Fixed with [2209].

Note: See TracTickets for help on using tickets.
© 2003 – 2016 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy