Ticket #2879: 2879.patch

_source/plugins/templates/dialogs/templates.js

@@ +1 @@
+/*
+Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+( function()
+{
+
+        // Load skin at first.
+        CKEDITOR.skins.load( 'default', 'templates' );
+
+        var doc = CKEDITOR.document;
+        var promptHTML = '<span>Please select the template to open in the editor<br \/> \
+                (the actual contents will be lost):<\/span>';
+        var previewHTML = '<div id="eList" class="cke_tpl_list"><div class="cke_tpl_loading">\
+                <span>Loading templates list. Please wait...<\/span><\/div><\/div>';
+        var emptyHTML = '<div class="cke_tpl_empty">\
+                <span>(No templates defined)<\/span><\/div>';
+
+        /**
+         * Construct the HTML view of the specified tempaltes data.
+         * @param {Array} tempaltes
+         */
+        function renderTemplatesList( templates, onSelectTemplateFunc )
+        {
+                var template;
+                var listCtEl = doc.getById( 'eList' );
+
+                // clear loading wait text.
+                listCtEl.setHtml( '' );
+
+                // evaluate templates preview list
+                var i, l = templates.length;
+                for( i = 0 ; i < l ; i++ )
+                {
+
+                        template = templates[ i ];
+
+                        var itemEl = listCtEl.append( doc.createElement( 'div' ) );
+                        itemEl.setCustomData( 'cke_tpl_index', template.id );
+                        itemEl.setAttribute( 'class', 'cke_tpl_item' );
+
+                        // Build the inner HTML of our new item DIV.
+                        var tplHTML = '<table class="cke_tpl_preview"><tr>';
+
+                        if( template.image )
+                                tplHTML += '<td class="cke_tpl_preview_img"><img src="' + template.image + '"><\/td>';
+
+                        tplHTML += '<td><span class="cke_tpl_title">' + template.title + '<\/span><br/>';
+
+                        if( template.description )
+                                tplHTML += '<span>' + template.description + '<\/span>';
+
+                        tplHTML += '<\/td><\/tr><\/table>';
+
+                        itemEl.setHtml( tplHTML );
+
+                        itemEl.on( 'mouseover', function()
+                        {
+                                this.addClass( 'cke_tpl_hover' );
+                        }, itemEl );
+
+                        itemEl.on( 'mouseout', function()
+                        {
+                                this.removeClass( 'cke_tpl_hover' );
+                        }, itemEl );
+
+                        itemEl.on( 'click', function()
+                        {
+                                onSelectTemplateFunc( this.getCustomData( 'cke_tpl_index' ) );
+                        }, itemEl );
+
+                }
+        }
+
+        /**
+         * Construct the HTML view of none templates.
+         */
+        function renderEmpty()
+        {
+                var listCtEl = doc.getById( 'eList' );
+                listCtEl.setHtml( emptyHTML );
+        }
+
+        CKEDITOR.dialog
+                .add(
+                        'templates',
+                        function( editor )
+                        {
+
+                                /**
+                                 * Load templates once.
+                                 */
+                                var isLoaded = false;
+                                return {
+
+                                        title :editor.lang.templates.title,
+                                        minWidth :450,
+                                        minHeight :400,
+                                        contents : [ {
+                                                id :'selectTpl',
+                                                label :editor.lang.templates.title,
+                                                accessKey :'I',
+                                                elements : [ {
+                                                        type :'vbox',
+                                                        padding :5,
+                                                        children : [
+                                                                {
+                                                                        type :'html',
+                                                                        html :promptHTML
+                                                                },
+                                                                {
+                                                                        type :'html',
+                                                                        html :previewHTML
+                                                                },
+                                                                {
+                                                                        id :'chkInsertOpt',
+                                                                        type :'checkbox',
+                                                                        label :editor.lang.templates.insertOption,
+                                                                        checked :editor.config.templates.replaceContent,
+                                                                        'default' :editor.config.templates.replaceContent
+                                                                } ]
+                                                } ]
+                                        } ],
+                                        buttons : [ CKEDITOR.dialog.cancelButton ],
+
+                                        onOk : function()
+                                        {
+                                        },
+                                        onShow : function()
+                                        {
+                                                var self = this;
+                                                // Load template contents.
+                                                if( !isLoaded )
+                                                {
+                                                        CKEDITOR.templates.loadTemplates( editor, function( templates ) {
+        
+                                                                                if( templates.length )
+                                                                                {
+                                                                                        /**
+                                                                                         * Insert the specified template content
+                                                                                         * to document.
+                                                                                         * @param {Number} index
+                                                                                         */
+                                                                                        function insertTemplate( index )
+                                                                                        {
+                                                                                                var isInsert = this.getValueOf(
+                                                                                                        'selectTpl', 'chkInsertOpt' ), content = templates[ index ].content;
+        
+                                                                                                if( isInsert )
+                                                                                                {
+                                                                                                        // reload editor data is asynchronous.
+                                                                                                        editor.on( 'contentDom',function(){
+                                                                                                                        this.saveSelection();
+                                                                                                                        this.hide();
+                                                                                                                }, this );
+                                                                                                        editor.setData( content );
+                                                                                                }
+                                                                                                else
+                                                                                                {
+                                                                                                        this.restoreSelection();
+                                                                                                        editor.insertHtml( content );
+                                                                                                        this.saveSelection();
+                                                                                                        this.hide();
+                                                                                                }
+                                                                                        }
+        
+                                                                                        renderTemplatesList( templates,
+                                                                                                CKEDITOR.tools.bind( insertTemplate, self ) );
+                                                                                }
+                                                                                else
+                                                                                        renderEmpty();
+        
+                                                                                isLoaded = true;
+                                                                        } );
+                                                }
+                                }
+                                };
+                        } );
+} )();
+
+

_source/plugins/templates/plugin.js

@@ +1 @@
+/*
+Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+CKEDITOR.tools.extend( CKEDITOR.config, {
+        'templates' : {
+                /**
+                 * Whether replace the current document content OR insert current
+                 * editing position.
+                 * 
+                 * @type Boolean
+                 * @default true
+                 */
+                replaceContent :true,
+
+                /**
+                 * The default folder which containing templates.
+                 * 
+                 * @type String
+                 * @default "templates"
+                 */
+                defaultDir :'templates',
+
+                /**
+                 * A set of templates definition files location.
+                 * 
+                 * @type Array
+                 * @default
+                 */
+                definitions : [
+//              {
+//                      base: 'http://www.somesite.com/repository/',
+//                      names: ['mytemplate1', 'mytemplate2']
+//              },
+                {
+                        names : [ 'default' ]
+                } ]
+        }
+} );
+
+(function(){
+        
+        CKEDITOR.plugins.add( 'templates', {
+                requires : [ 'dialog' ],
+
+                init : function( editor )
+                {
+
+                        CKEDITOR.dialog.add( 'templates',
+                                this.path + 'dialogs/templates.js' );
+                        editor.addCommand( 'templates', new CKEDITOR.dialogCommand(
+                                'templates' ) );
+                        editor.ui.addButton( 'Templates', {
+                                label :editor.lang.common.templates,
+                                command :'templates'
+                        } );
+                }
+        } );
+                                        
+        CKEDITOR.templates = new CKEDITOR.resourceManager(
+                '_source/' + // %REMOVE_LINE%
+                CKEDITOR.config.templates.defaultDir + '/' , 'template' );
+
+        CKEDITOR.tools
+                .extend(
+                        CKEDITOR.templates,
+                        {
+                                /**
+                                 * Use external as base path when resolving paths.
+                                 * @override
+                                 */
+                                getPath : function( name )
+                                {
+                                        return ( this.externals[ name ] || this.basePath ) + name
+                                                + '/';
+                                },
+                                /**
+                                 * Load all the templates files assigned by the editor
+                                 * configuration.
+                                 * @param {Functoin}
+                                 *            callback
+                                 */
+                                loadTemplates : function( editor, callback )
+                                {
+                                        /**
+                                         * Hold the loaded template definitions.
+                                         * @type {Array}
+                                         */
+                                        var loadedTemplates = [];
+
+                                        var names = this.resolveExternalTemplates( editor.config.templates.definitions );
+
+                                        this.load( names, function( resources )
+                                                        {
+
+                                                                // resolve real image base path.
+                                                                var name, basePath, templateDefinition, templates, template, indexBase = 0;
+                                                                for( name in resources )
+                                                                {
+                                                                        templateDefinition = resources[ name ];
+                                                                        if( !templateDefinition.loaded )
+                                                                        {
+
+                                                                                basePath = templateDefinition.imageBase || 'images';
+                                                                                templateDefinition.imageBase = CKEDITOR
+                                                                                        .getUrl( this.getPath( name ) + basePath );
+                                                                        }
+                                                                        templates = templateDefinition.templates;
+                                                                        var i, l = templates.length;
+
+                                                                        for( i = 0 ; i < l ; i++ )
+                                                                        {
+                                                                                template = templates[ i ];
+                                                                                if( !templateDefinition.loaded )
+                                                                                {
+                                                                                        template.image = templateDefinition.imageBase
+                                                                                                + '/' + template.image;
+                                                                                }
+                                                                                template.id = indexBase + i;
+                                                                                loadedTemplates.push( template );
+                                                                        }
+                                                                        templateDefinition.loaded = true;
+                                                                        indexBase += l;
+                                                                }
+
+                                                                callback( loadedTemplates );
+                                                        }, this );
+                                },
+                                /**
+                                 * Preprocess all external templates.
+                                 */
+                                resolveExternalTemplates : function( definition )
+                                {
+                                        var allNames = [];
+                                        var i, l = definition.length;
+                                        var def;
+                                        for( i = 0 ; i < l ; i++ )
+                                        {
+                                                def = definition[ i ];
+                                                var names = def.names;
+                                                if( def.base )
+                                                {
+                                                        var j, s = names.length;
+                                                        for( j = 0 ; j < s ; j++ )
+                                                        {
+                                                                this.addExternal( names[ j ], def.base );
+                                                        }
+                                                }
+                                                allNames = allNames.concat( names );
+                                        }
+                                        return allNames;
+                                }
+                        }, true );
+})();
+

_source/plugins/toolbar/plugin.js

@@ -207 +207 @@
 [
         [
                 'Source', '-',
-                'NewPage', '-',
+                'NewPage', 'Templates', '-',
                 'Bold', 'Italic', 'Underline', 'Strike', '-',
                 'Subscript', 'Superscript', '-',
                 'SelectAll', 'RemoveFormat', '-',

_source/core/dom/domobject.js

@@ -165 +165 @@
                 var expandoNumber = this.$._cke_expando,
                         dataSlot = expandoNumber && customData[ expandoNumber ];
 
-                return ( dataSlot && dataSlot[ key ] ) || null;
+                if ( dataSlot && ( dataSlot[ key ] !== null  ) ) 
+                        return dataSlot[ key ];
+                else 
+                        return null;
         };
 
         // Implement CKEDITOR.event.

_source/core/tools.js

@@ -310 +310 @@
                                 return i;
                 }
                 return -1;
+        },
+        /**
+         * Binds a function with an object as its this reference.
+         * 
+         * @param {Function}
+         *            func The function to be bounded.
+         * @param {Object}
+         *            obj This this reference to bind to the function.
+         * @returns {Function} The bound function.
+         */
+        bind : function ( func, obj )
+        {
+                return function ( )
+                {
+                        return func.apply( obj , arguments );
+                }
         }
 };
 

_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,templates',
 
         /**
          * The theme to be used to build the UI.

_source/lang/en.js

@@ -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'
+        },
+        
+        templates :
+        {
+                title : 'Content Templates',
+                insertOption: 'Replace actual cotents'
         }
 };

_source/skins/default/toolbar.css

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

_source/skins/default/skin.js

@@ -22 +22 @@
         return {
                 preload : preload,
                 editor : { css : [ 'editor.css' ] },
-                dialog : { css : [ 'dialog.css' ],  js : dialogJs }
+                dialog : { css : [ 'dialog.css' ],  js : dialogJs },
+                templates : {css : [ 'templates.css' ]} 
         };
 })() );
 

_source/skins/default/templates.css

@@ +1 @@
+.cke_skin_default .cke_tpl_list
+{
+        border: #dcdcdc 2px solid;
+        background-color: #ffffff;
+        overflow: auto;
+        width: 100%;
+        height: 220px;
+}
+
+.cke_skin_default .cke_tpl_item
+{
+        margin: 5px;
+        padding: 7px;
+        border: #eeeeee 1px solid;
+        *width: 88%;
+}
+
+.cke_skin_default .cke_tpl_preview
+{
+        border-collapse: separate;
+        text-indent:0;
+        width: 100%;
+}
+.cke_skin_default .cke_tpl_preview td
+{
+        padding: 2px;
+        vertical-align: middle;
+}
+.cke_skin_default .cke_tpl_preview .cke_tpl_preview_img
+{
+        width: 100px;
+}
+.cke_skin_default .cke_tpl_preview span
+{
+        white-space: normal;
+}
+
+.cke_skin_default .cke_tpl_title
+{
+        font-weight: bold;
+}
+
+.cke_skin_default .cke_tpl_hover
+{
+        border: #ff9933 1px solid !important;
+        background-color: #fffacd !important;
+        cursor: pointer;
+        cursor: hand;
+}
+/*
+ * Fix property 'cursor' doesn't inherit on table 
+ */
+.cke_skin_default .cke_tpl_hover *
+{
+        cursor: inherit;
+}
+
+.cke_skin_default .cke_tpl_empty, .cke_tpl_loading
+{
+        text-align: center;
+        padding: 5px;
+}

_source/templates/default/template.js

@@ +1 @@
+CKEDITOR.templates.add( 'default', {
+        'imageBase' : 'images',
+        'templates' : [
+        {
+                'title': 'Image and Title',
+                'image': 'template1.gif',
+                'description': 'One main image with a title and text that surround the image.',
+                'content': '<img style="MARGIN-RIGHT: 10px" height="100" alt="" width="100" align="left"\/> <h3>Type the title here<\/h3> Type the text here '
+        },
+        {
+                'title': 'Strange Template',
+                'image': 'template2.gif',
+                'description': 'A template that defines two colums, each one with a title, and some text.',
+                'content': '<table cellspacing="0" cellpadding="0" width="100%" border="0"><tbody><tr><td width="50%"><h3>Title 1<\/h3><\/td><td>         <\/td><td width="50%"><h3>Title 2<\/h3><\/td><\/tr><tr><td>Text 1<\/td><td> <\/td><td>Text 2<\/td><\/tr><\/tbody><\/table>More text goes here.'
+        },
+        {
+                'title': 'Text and Table',
+                'image': 'template3.gif',
+                'description': 'A title with some text and a table.',
+                'content': '<table align="left" width="80%" border="0" cellspacing="0" cellpadding="0"><tr><td><h3>Title goes here<\/h3><p><table style="FLOAT: right" cellspacing="0" cellpadding="0" width="150" border="1"><tbody><tr><td align="center" colspan="3"><strong>Table title<\/strong><\/td><\/tr><tr><td> <\/td><td> <\/td><td> <\/td><\/tr><tr><td> <\/td><td> <\/td><td> <\/td><\/tr><tr><td> <\/td><td> <\/td><td> <\/td><\/tr><tr><td> <\/td><td> <\/td><td> <\/td><\/tr><\/tbody><\/table>Type the text here<\/p><\/td><\/tr><\/table>'
+        }
+        ]
+} );
+