Opened 17 years ago

Closed 16 years ago

Last modified 15 years ago

#2234 closed New Feature (fixed)

DIV container tool

Reported by: Frederico Caldeira Knabben Owned by: Martin Kou
Priority: Normal Milestone: FCKeditor 2.6.3
Component: General Version:
Keywords: Confirmed Review+ Cc:

Description

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.

Change History (13)

comment:1 Changed 17 years ago by Frederico Caldeira Knabben

Milestone: 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 16 years ago by Martin Kou

Owner: set to Martin Kou
Status: newassigned

comment:3 Changed 16 years ago by 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;
}

comment:4 Changed 16 years ago by 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.

comment:5 Changed 16 years ago by Martin Kou

Keywords: Review? added

comment:6 Changed 16 years ago by Frederico Caldeira Knabben

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>

<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.

comment:7 Changed 16 years ago by Martin Kou

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 16 years ago by Frederico Caldeira Knabben

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: http://screencast.com/t/8wAqb8dGZYi

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

comment:9 Changed 16 years ago by Martin Kou

Keywords: Review? added; Review- removed

comment:10 Changed 16 years ago by Frederico Caldeira Knabben

Keywords: Review+ added; Review? removed

comment:11 Changed 16 years ago by Frederico Caldeira Knabben

Keywords: Review- added; Review+ removed

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

comment:12 Changed 16 years ago by Frederico Caldeira Knabben

Keywords: Review+ added; Review- removed

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

comment:13 Changed 16 years ago by Martin Kou

Resolution: fixed
Status: assignedclosed

Fixed with [2209].

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy