Ticket #2885: 2885.patch

_source/plugins/toolbar/plugin.js

@@ -211 +211 @@
                 'Bold', 'Italic', 'Underline', 'Strike', '-',
                 'Subscript', 'Superscript', '-',
                 'SelectAll', 'RemoveFormat', '-',
-                'Smiley', 'HorizontalRule', 'SpecialChar', 'PageBreak'
+                'Smiley', 'HorizontalRule', 'SpecialChar', 'PageBreak', '-',
+                'CreateDiv'
         ]
 ];

_source/plugins/newcontainer/dialogs/newcontainer.js

@@ +1 @@
+/*
+ * Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.html or http://ckeditor.com/license
+ */
+
+CKEDITOR.dialog.add('newcontainer', function(editor) {
+        
+        /**
+         * Set element attributes assigned by the dialog fields.
+         */
+        function receiveAttributesFromDialog( element )
+        {
+                var attributes = {}, fileldValue;
+                this.foreach( function( field )
+                {
+                        //Ignore layout container 
+                        if( /^(?!vbox|hbox)/.test( field.type )
+                                //Ignore empty value 
+                                && ( fileldValue = field.getValue() )
+                                && !CKEDITOR.tools.isEmpty( fileldValue )
+                                //TODO: Process 'elementStyle'
+                                && 'elementStyle' !== field.id )        
+                        {
+                                // ignore default element attribute values
+                                if( 'dir' === field.id
+                                        && element.getComputedStyle( 'direction' ) === fileldValue )
+                                        return true;
+                                attributes[ field.id ] = fileldValue;
+                        }
+                } )     ;
+                element.setAttributes( attributes );
+        }
+        
+        /**
+         * Read the dialog fields values from the specified element attributes.
+         * @param {CKEDITOR.dom.element} element
+         */
+        function populateAttributesToDialog( element )
+        {
+                this.foreach( function( field )
+                {
+                        //Ignore layout container 
+                        if( /^(?!vbox|hbox)/.test( field.type )
+                                //TODO: Process 'elementStyle'
+                                && 'elementStyle' !== field.id )        
+                        {
+                                field.setValue( element.getAttribute( field.id ) || '' );
+                        }
+                } );
+        }
+        
+        /**
+         * Either create or detect the desired block containers among the selected ranges.
+         * @param {Object} editor
+         * @param {Object} containerTagName The tagName of the container.
+         * @param {Object} isCreate Whether it's a creation process OR a detection process.
+         */     
+        function applyContainer(editor, containerTagName, isCreate)
+        {
+                // new adding containers OR detected pre-existed containers.
+                var containers = [],
+
+                // All block level elements which contained by the ranges.
+                containedBlocks = [], block;
+
+                // Get all ranges from the selection.
+                var selection = editor.document.getSelection();
+                var ranges = selection.getRanges();
+                var i, l = ranges.length, iterator;
+
+                // Get the DTD definition for the element.
+                var dtd = CKEDITOR.dtd[ containerTagName ];
+                // collect all included block level elements
+                for( i = 0 ; i < l ; i++ )
+                {
+                        iterator = ranges[ i ].createIterator();
+                        while( ( block = iterator.getNextParagraph() ) )
+                        {
+                                // bypass dtd disallowed elements.
+                                while( !dtd[ block.getName() ] )
+                                        block = block.getParent();
+                                // avoid duplicate
+                                if( CKEDITOR.tools.indexOf( containedBlocks, block,
+                                        compareNodes ) === -1 )
+                                        containedBlocks.push( block );
+                        }
+                }
+
+                var blockGroups = groupByBlockLimit( containedBlocks ), l = blockGroups.length, ancestor, blockEl, containerEl;
+                containedBlocks = [];
+                for( i = 0 ; i < l ; i++ )
+                {
+                        ancestor = getNodesDeepMostAncestor( blockGroups[ i ] );
+                        
+                        if(isCreate)
+                        {
+                                containerEl = new CKEDITOR.dom.element( containerTagName ,
+                                        editor.document );
+                        }
+                        
+                        var j, s = blockGroups[ i ].length,
+                        //Wrapped blocks counting
+                        childCount = 0;
+                        for( j = 0 ; j < s ; j++ )
+                        {
+                                blockEl = blockGroups[ i ][ j ];
+
+                                // Reconstruct the block list to only contain direct
+                                // children of common ancestor.
+                                while( !blockEl.getParent().equals( ancestor ) )
+                                        blockEl = blockEl.getParent();
+
+                                // avoid duplicate
+                                if( CKEDITOR.tools.indexOf( containedBlocks, blockEl,
+                                        compareNodes ) === -1 )
+                                {
+                                        if( isCreate )
+                                        {
+                                                // Establish new container, wrapping all
+                                                // elements in this group.
+                                                if( j == 0 )
+                                                        containerEl.insertBefore( blockEl );
+                                                containerEl.append( blockEl );
+                                                containedBlocks.push( blockEl );
+                                        }
+                                        else
+                                                childCount++;
+                                }
+                        }
+
+                        if( isCreate )
+                        {
+                                // drop pre-existed container, since new container already established.
+                                if( ancestor.getName() === containerTagName
+                                        && 1 === ancestor.getNonEmptyChildren().length )
+                                        ancestor.remove( true );
+                                containers.push( containerEl );
+                        }
+                        else
+                        {
+                                // discover existed container
+                                if( ancestor.getName() === containerTagName
+                                        && childCount === ancestor.getNonEmptyChildren().length )
+                                        containers.push( ancestor );
+                        }
+                }
+
+                return containers;
+        }
+        
+        /**
+         * Divide a set of nodes to different groups by their path's blocklimit element.
+         * Note: the specified nodes should be in source order naturally, which mean they are supposed to producea by following class:
+         *  * CKEDITOR.dom.range.Iterator
+         *  * CKEDITOR.dom.domWalker
+         *  @return {Array []} the grouped nodes
+         */
+        function groupByBlockLimit(nodes)
+        {
+                var groups = [],
+                        lastBlockLimit = null,
+                        path;
+                for ( var i = 0 ; i < nodes.length ; i++ )
+                {
+                        block = nodes[i] ;
+                        path = new CKEDITOR.dom.elementPath( block ) ;
+                        if ( !path.blockLimit.equals(lastBlockLimit ) )
+                        {
+                                groups.push( [] ) ;
+                                lastBlockLimit = path.blockLimit ;
+                        }
+                        groups[groups.length - 1].push( block ) ;
+                }
+                return groups;
+        }
+        
+        /**
+         * Find the deep-most common ancestor of a set of dom nodes.
+         * Note: This method will report 'body' node as result if nothing satisfied.
+         * @param {Array<CKEDITOR.dom.node>} nodes a set of dom nodes
+         * @return {CKEDITOR.dom.node} The DCA result
+         */
+        function getNodesDeepMostAncestor( nodes )
+        {
+                var range , currentDCA;
+                if(nodes.length === 1)
+                        return nodes[0].getParent();
+                
+                nodes = CKEDITOR.tools.cloneArray( nodes);
+                while ( nodes.length > 1 )
+                {
+                        range = new CKEDITOR.dom.range();
+                        range.startContainer = nodes[ 0 ];
+                        range.endContainer = nodes[ 1 ];
+                        currentDCA = range.getCommonAncestor( false );
+                        if ( currentDCA.getName() === 'body' )
+                                return currentDCA;
+                        else
+                                nodes.splice( 0 , 2 , currentDCA );
+                }
+                return nodes[ 0 ];
+        }
+        
+        function compareNodes()
+        {
+                return arguments[0].equals(arguments[1]);
+        }
+        
+        /**
+         * Hold a collection of created block container elements.  
+         */
+        var containers = [];
+        
+        return {
+                title : editor.lang.newcontainer.title,
+                minWidth : 400,
+                minHeight : 320,
+                contents : [{
+                        id : 'info',
+                        label : editor.lang.newcontainer.generalTabLabel,
+                        title : editor.lang.newcontainer.generalTabLabel,
+                        elements : [{
+                                type : 'hbox',
+                                widths : ['50%', '50%'],
+                                children : [{
+                                                        id : 'elementStyle',
+                                                        type : 'select',
+                                                        style : 'width: 100%;',
+                                                        label : editor.lang.newcontainer.styleSelectLabel,
+                                                        'default' : editor.config.newcontainer.defaultValues.style,
+                                                        items : []      //      TODO: Fill 'elementStyle' selection options.
+                                                },{
+                                                        id : 'class',
+                                                        type : 'text',
+                                                        label : editor.lang.newcontainer.cssClassInputLabel,
+                                                        'default' : editor.config.newcontainer.defaultValues.cssClass
+                                                }]
+                        }]
+                }, {
+                        id : 'advanced',
+                        label : editor.lang.newcontainer.advancedTabLabel,
+                        title : editor.lang.newcontainer.advancedTabLabel,
+                        elements : [{
+                                type : 'vbox',
+                                padding : 1,
+                                children : [{
+                                        type : 'hbox',
+                                        widths : ['50%', '50%'],
+                                        children : [{
+                                                                type : 'text',
+                                                                id : 'id',
+                                                                label : editor.lang.newcontainer.IdInputLabel,
+                                                                'default' : editor.config.newcontainer.defaultValues.Id
+                                                        }, {
+                                                                type : 'text',
+                                                                id : 'lang',
+                                                                label : editor.lang.newcontainer.languageCodeInputLabel,
+                                                                'default' : editor.config.newcontainer.defaultValues.languageCode
+                                                        }]
+                                }, {
+                                        type : 'hbox',
+                                        children : [{
+                                                                type : 'text',
+                                                                id : 'style',
+                                                                style : 'width: 100%;',
+                                                                label : editor.lang.newcontainer.inlineStyleInputLabel,
+                                                                'default' : editor.config.newcontainer.defaultValues.inlineStyle
+                                                        }]
+                                }, {
+                                        type : 'hbox',
+                                        children : [{
+                                                type : 'text',
+                                                id : 'title',
+                                                style : 'width: 100%;',
+                                                label : editor.lang.newcontainer.advisoryTitleInputLabel,
+                                                'default' : editor.config.newcontainer.defaultValues.advisoryTitle
+                                        }]
+                                }, {
+                                        type : 'select',
+                                        id : 'dir',
+                                        style : 'width: 100%;',
+                                        label : editor.lang.newcontainer.langDirLabel,
+                                        'default' : editor.config.newcontainer.defaultValues.langDirLabel,
+                                        items : [ [ editor.lang.newcontainer.langDirOptions.langDirLTRLabel, 'ltr' ],
+                                                        [ editor.lang.newcontainer.langDirOptions.langDirRTLLabel, 'rtl'] ]
+                                }]
+                        }]
+                }],
+                onShow : function()
+                {
+                        containers = [];
+                        // Whether always create new container regardless of existed
+                        // ones.
+                        if( !editor.config.newcontainer.alwaysCreate )
+                        {
+                                if( CKEDITOR.env.ie )
+                                        this.restoreSelection();
+                                // Try to collect the containers that already existed in
+                                // ranges
+                                containers = applyContainer( editor, 'div' );
+                                if( containers.length )
+                                {
+                                        // update dialog field values
+                                        populateAttributesToDialog.call( this, containers[ 0 ] );
+                                }
+                        }
+                },
+                onOk : function()
+                {
+                        if( CKEDITOR.env.ie )
+                                this.restoreSelection();
+                        containers = applyContainer( editor, 'div', true );
+                        
+                        // update elements attributes
+                        var i, l = containers.length;
+                        for( i = 0 ; i < l ; i++ )
+                        {
+                                receiveAttributesFromDialog.call( this, containers[ i ] );
+                        }
+                        
+                        this.hide();
+                }
+        };
+});

_source/plugins/newcontainer/plugin.js

@@ +1 @@
+/*
+Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+/**
+ * @fileOverview The "newcontainer" plugin. It wraps the selected block level elements with a 'div' element with specified styles and attributes.
+ * 
+ */
+
+( function()
+{
+        CKEDITOR.plugins.add( 'newcontainer', {
+                requires : [ 'editingblock', 'domiterator', 'elementspath' ],
+
+                init : function( editor )
+                {
+
+                        editor.addCommand( 'creatediv', 
+                                new CKEDITOR.dialogCommand( 'newcontainer' ) );
+                        editor.ui.addButton( 'CreateDiv', {
+                                label :editor.lang.newcontainer.toolbar,
+                                command :'creatediv'
+                        } );
+                        CKEDITOR.dialog.add( 'newcontainer',
+                                this.path + 'dialogs/newcontainer.js' );
+                }
+        } );
+
+} )();
+
+CKEDITOR.config.newcontainer = {
+        
+        /**
+         * Whether ignore the pre-existed containers
+         */
+        alwaysCreate :false,
+        defaultValues : {
+                title :'',
+                cssClass :'',
+                style :'',
+                Id :'',
+                languageCode :'',
+                inlineStyle :'',
+                advisoryTitleInput :'',
+                langDir :'ltr'
+        }
+};

_source/core/dom/element.js

@@ -360 +360 @@
                 {
                         return new CKEDITOR.dom.nodeList( this.$.childNodes );
                 },
+                
+                /**
+                 * Same as CKEDITOR.dom.element::getChildren except this method ignore
+                 * text nodes which contains only blank characters.
+                 * @return {Array}  
+                 */
+                getNonEmptyChildren : function()
+                {
+                        var resultsChilds = [];
+                        var children = this.getChildren();
+                        var i, l = children.count(), child;
+                        for( i = 0 ; i < l ; i++ )
+                        {
+                                child = children.getItem( i );
+                                if( ! ( child.type === CKEDITOR.NODE_TEXT 
+                                        && /[ \t\n\r]+/.test( child.getText() ) ) )
+                                        resultsChilds.push( child );
+                        }
+                        return resultsChilds;
+                },
 
                 /**
                  * Gets the current computed value of one of the element CSS style

_source/core/tools.js

@@ -296 +296 @@
          * Returns the index of an element in an array.
          * @param {Array} array The array to be searched.
          * @param {Object} entry The element to be found.
+         * @param {Function} equalFunc The comparator function.
          * @returns {Number} The (zero based) index of the first entry that matches
          *              the entry, or -1 if not found.
          * @example
@@ -302 +303 @@
          * var letters = [ 'a', 'b', 'c' ];
          * alert( CKEDITOR.tools.indexOf( letters, 'b' ) );  "1"
          */
-        indexOf : function( array, entry )
+        indexOf : function( array, entry , equalFunc)
         {
                 for ( var i = 0, len = array.length ; i < len ; i++ )
                 {
-                        if ( array[ i ] == entry )
+                        if ( equalFunc? equalFunc(array[ i ], entry) : array[ i ] == entry )
                                 return i;
                 }
                 return -1;
+        },
+        
+        /**
+         * Examine if the object is meaningless, which yield a falsy value but except number '0' and boolean 'false'.
+         * @param {Object} object
+         */
+        isEmpty : function( object )
+        {
+                return object === null ||( typeof object === 'undefined' ) || object === '';
+        },
+        
+        /**
+         * Shallow copy all items inside an Array. 
+         * @param {Array} array
+         */
+        cloneArray: function( array ) {
+                return [].concat( array );
         }
+        
 };
 
 // PACKAGER_RENAME( CKEDITOR.tools )

_source/core/config.js

@@ -146 +146 @@
          * @example
          * config.plugins = 'basicstyles,button,htmldataprocessor,toolbar,wysiwygarea';
          */
-        plugins : 'basicstyles,button,elementspath,horizontalrule,htmldataprocessor,keystrokes,newpage,pagebreak,removeformat,smiley,sourcearea,specialchar,tab,toolbar,wysiwygarea',
+        plugins : 'basicstyles,button,elementspath,horizontalrule,htmldataprocessor,keystrokes,newpage,pagebreak,removeformat,smiley,sourcearea,specialchar,tab,toolbar,wysiwygarea,newcontainer',
 
         /**
          * The theme to be used to build the UI.

_source/lang/en.js

@@ -9 +9 @@
  */
 
 /**#@+
-   @type String
-   @example
+@type String
+@example
 */
 
 /**
@@ -329 +329 @@
                 chkLoop         : 'Loop',
                 chkMenu         : 'Enable Flash Menu',
                 chkFull         : 'Allow Fullscreen',
-                scale           : 'Scale',
+                scale           : 'Scale',
                 scaleAll                : 'Show all',
                 scaleNoBorder   : 'No Border',
                 scaleFit                : 'Exact Fit',
@@ -366 +366 @@
         elementsPath :
         {
                 eleTitle : '%1 element'
+        },
+        
+        newcontainer :
+        {
+                title: 'Create Div Container',
+                toolbar: 'Create Div Container',
+                generalTabLabel : 'General',
+                advancedTabLabel: 'Advanced',
+                cssClassInputLabel : 'Stylesheet Classes',
+                styleSelectLabel : 'Style',
+                IdInputLabel: 'Id',
+                languageCodeInputLabel : ' Language Code',
+                inlineStyleInputLabel : 'Inline Style',
+                advisoryTitleInputLabel : 'Advisory Title',
+                langDirLabel : 'Language Direction',
+                langDirOptions : {
+                        langDirLTRLabel : 'Left to Right (LTR)',
+                        langDirRTLLabel : 'Right to Left (RTL)'
+                }
         }
 };

_source/skins/default/toolbar.css

@@ -305 +305 @@
 {
         background-position: 0 -880px;
 }
+.cke_skin_default a.cke_button_creatediv .cke_icon
+{
+        background-position: 0 -1168px;
+}