Ticket #2879: 2879.patch

File 2879.patch, 15.8 KB (added by Garry Yao, 11 years ago)
  • _source/plugins/templates/dialogs/templates.js

     
     1/*
     2Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
     3For licensing, see LICENSE.html or http://ckeditor.com/license
     4*/
     5
     6( function()
     7{
     8
     9        // Load skin at first.
     10        CKEDITOR.skins.load( 'default', 'templates' );
     11
     12        var doc = CKEDITOR.document;
     13        var promptHTML = '<span>Please select the template to open in the editor<br \/> \
     14                (the actual contents will be lost):<\/span>';
     15        var previewHTML = '<div id="eList" class="cke_tpl_list"><div class="cke_tpl_loading">\
     16                <span>Loading templates list. Please wait...<\/span><\/div><\/div>';
     17        var emptyHTML = '<div class="cke_tpl_empty">\
     18                <span>(No templates defined)<\/span><\/div>';
     19
     20        /**
     21         * Construct the HTML view of the specified tempaltes data.
     22         * @param {Array} tempaltes
     23         */
     24        function renderTemplatesList( templates, onSelectTemplateFunc )
     25        {
     26                var template;
     27                var listCtEl = doc.getById( 'eList' );
     28
     29                // clear loading wait text.
     30                listCtEl.setHtml( '' );
     31
     32                // evaluate templates preview list
     33                var i, l = templates.length;
     34                for( i = 0 ; i < l ; i++ )
     35                {
     36
     37                        template = templates[ i ];
     38
     39                        var itemEl = listCtEl.append( doc.createElement( 'div' ) );
     40                        itemEl.setCustomData( 'cke_tpl_index', template.id );
     41                        itemEl.setAttribute( 'class', 'cke_tpl_item' );
     42
     43                        // Build the inner HTML of our new item DIV.
     44                        var tplHTML = '<table class="cke_tpl_preview"><tr>';
     45
     46                        if( template.image )
     47                                tplHTML += '<td class="cke_tpl_preview_img"><img src="' + template.image + '"><\/td>';
     48
     49                        tplHTML += '<td><span class="cke_tpl_title">' + template.title + '<\/span><br/>';
     50
     51                        if( template.description )
     52                                tplHTML += '<span>' + template.description + '<\/span>';
     53
     54                        tplHTML += '<\/td><\/tr><\/table>';
     55
     56                        itemEl.setHtml( tplHTML );
     57
     58                        itemEl.on( 'mouseover', function()
     59                        {
     60                                this.addClass( 'cke_tpl_hover' );
     61                        }, itemEl );
     62
     63                        itemEl.on( 'mouseout', function()
     64                        {
     65                                this.removeClass( 'cke_tpl_hover' );
     66                        }, itemEl );
     67
     68                        itemEl.on( 'click', function()
     69                        {
     70                                onSelectTemplateFunc( this.getCustomData( 'cke_tpl_index' ) );
     71                        }, itemEl );
     72
     73                }
     74        }
     75
     76        /**
     77         * Construct the HTML view of none templates.
     78         */
     79        function renderEmpty()
     80        {
     81                var listCtEl = doc.getById( 'eList' );
     82                listCtEl.setHtml( emptyHTML );
     83        }
     84
     85        CKEDITOR.dialog
     86                .add(
     87                        'templates',
     88                        function( editor )
     89                        {
     90
     91                                /**
     92                                 * Load templates once.
     93                                 */
     94                                var isLoaded = false;
     95                                return {
     96
     97                                        title :editor.lang.templates.title,
     98                                        minWidth :450,
     99                                        minHeight :400,
     100                                        contents : [ {
     101                                                id :'selectTpl',
     102                                                label :editor.lang.templates.title,
     103                                                accessKey :'I',
     104                                                elements : [ {
     105                                                        type :'vbox',
     106                                                        padding :5,
     107                                                        children : [
     108                                                                {
     109                                                                        type :'html',
     110                                                                        html :promptHTML
     111                                                                },
     112                                                                {
     113                                                                        type :'html',
     114                                                                        html :previewHTML
     115                                                                },
     116                                                                {
     117                                                                        id :'chkInsertOpt',
     118                                                                        type :'checkbox',
     119                                                                        label :editor.lang.templates.insertOption,
     120                                                                        checked :editor.config.templates.replaceContent,
     121                                                                        'default' :editor.config.templates.replaceContent
     122                                                                } ]
     123                                                } ]
     124                                        } ],
     125                                        buttons : [ CKEDITOR.dialog.cancelButton ],
     126
     127                                        onOk : function()
     128                                        {
     129                                        },
     130                                        onShow : function()
     131                                        {
     132                                                var self = this;
     133                                                // Load template contents.
     134                                                if( !isLoaded )
     135                                                {
     136                                                        CKEDITOR.templates.loadTemplates( editor, function( templates ) {
     137       
     138                                                                                if( templates.length )
     139                                                                                {
     140                                                                                        /**
     141                                                                                         * Insert the specified template content
     142                                                                                         * to document.
     143                                                                                         * @param {Number} index
     144                                                                                         */
     145                                                                                        function insertTemplate( index )
     146                                                                                        {
     147                                                                                                var isInsert = this.getValueOf(
     148                                                                                                        'selectTpl', 'chkInsertOpt' ), content = templates[ index ].content;
     149       
     150                                                                                                if( isInsert )
     151                                                                                                {
     152                                                                                                        // reload editor data is asynchronous.
     153                                                                                                        editor.on( 'contentDom',function(){
     154                                                                                                                        this.saveSelection();
     155                                                                                                                        this.hide();
     156                                                                                                                }, this );
     157                                                                                                        editor.setData( content );
     158                                                                                                }
     159                                                                                                else
     160                                                                                                {
     161                                                                                                        this.restoreSelection();
     162                                                                                                        editor.insertHtml( content );
     163                                                                                                        this.saveSelection();
     164                                                                                                        this.hide();
     165                                                                                                }
     166                                                                                        }
     167       
     168                                                                                        renderTemplatesList( templates,
     169                                                                                                CKEDITOR.tools.bind( insertTemplate, self ) );
     170                                                                                }
     171                                                                                else
     172                                                                                        renderEmpty();
     173       
     174                                                                                isLoaded = true;
     175                                                                        } );
     176                                                }
     177                                }
     178                                };
     179                        } );
     180} )();
     181
     182
  • _source/plugins/templates/plugin.js

     
     1/*
     2Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
     3For licensing, see LICENSE.html or http://ckeditor.com/license
     4*/
     5
     6CKEDITOR.tools.extend( CKEDITOR.config, {
     7        'templates' : {
     8                /**
     9                 * Whether replace the current document content OR insert current
     10                 * editing position.
     11                 *
     12                 * @type Boolean
     13                 * @default true
     14                 */
     15                replaceContent :true,
     16
     17                /**
     18                 * The default folder which containing templates.
     19                 *
     20                 * @type String
     21                 * @default "templates"
     22                 */
     23                defaultDir :'templates',
     24
     25                /**
     26                 * A set of templates definition files location.
     27                 *
     28                 * @type Array
     29                 * @default
     30                 */
     31                definitions : [
     32//              {
     33//                      base: 'http://www.somesite.com/repository/',
     34//                      names: ['mytemplate1', 'mytemplate2']
     35//              },
     36                {
     37                        names : [ 'default' ]
     38                } ]
     39        }
     40} );
     41
     42(function(){
     43       
     44        CKEDITOR.plugins.add( 'templates', {
     45                requires : [ 'dialog' ],
     46
     47                init : function( editor )
     48                {
     49
     50                        CKEDITOR.dialog.add( 'templates',
     51                                this.path + 'dialogs/templates.js' );
     52                        editor.addCommand( 'templates', new CKEDITOR.dialogCommand(
     53                                'templates' ) );
     54                        editor.ui.addButton( 'Templates', {
     55                                label :editor.lang.common.templates,
     56                                command :'templates'
     57                        } );
     58                }
     59        } );
     60                                       
     61        CKEDITOR.templates = new CKEDITOR.resourceManager(
     62                '_source/' + // %REMOVE_LINE%
     63                CKEDITOR.config.templates.defaultDir + '/' , 'template' );
     64
     65        CKEDITOR.tools
     66                .extend(
     67                        CKEDITOR.templates,
     68                        {
     69                                /**
     70                                 * Use external as base path when resolving paths.
     71                                 * @override
     72                                 */
     73                                getPath : function( name )
     74                                {
     75                                        return ( this.externals[ name ] || this.basePath ) + name
     76                                                + '/';
     77                                },
     78                                /**
     79                                 * Load all the templates files assigned by the editor
     80                                 * configuration.
     81                                 * @param {Functoin}
     82                                 *            callback
     83                                 */
     84                                loadTemplates : function( editor, callback )
     85                                {
     86                                        /**
     87                                         * Hold the loaded template definitions.
     88                                         * @type {Array}
     89                                         */
     90                                        var loadedTemplates = [];
     91
     92                                        var names = this.resolveExternalTemplates( editor.config.templates.definitions );
     93
     94                                        this.load( names, function( resources )
     95                                                        {
     96
     97                                                                // resolve real image base path.
     98                                                                var name, basePath, templateDefinition, templates, template, indexBase = 0;
     99                                                                for( name in resources )
     100                                                                {
     101                                                                        templateDefinition = resources[ name ];
     102                                                                        if( !templateDefinition.loaded )
     103                                                                        {
     104
     105                                                                                basePath = templateDefinition.imageBase || 'images';
     106                                                                                templateDefinition.imageBase = CKEDITOR
     107                                                                                        .getUrl( this.getPath( name ) + basePath );
     108                                                                        }
     109                                                                        templates = templateDefinition.templates;
     110                                                                        var i, l = templates.length;
     111
     112                                                                        for( i = 0 ; i < l ; i++ )
     113                                                                        {
     114                                                                                template = templates[ i ];
     115                                                                                if( !templateDefinition.loaded )
     116                                                                                {
     117                                                                                        template.image = templateDefinition.imageBase
     118                                                                                                + '/' + template.image;
     119                                                                                }
     120                                                                                template.id = indexBase + i;
     121                                                                                loadedTemplates.push( template );
     122                                                                        }
     123                                                                        templateDefinition.loaded = true;
     124                                                                        indexBase += l;
     125                                                                }
     126
     127                                                                callback( loadedTemplates );
     128                                                        }, this );
     129                                },
     130                                /**
     131                                 * Preprocess all external templates.
     132                                 */
     133                                resolveExternalTemplates : function( definition )
     134                                {
     135                                        var allNames = [];
     136                                        var i, l = definition.length;
     137                                        var def;
     138                                        for( i = 0 ; i < l ; i++ )
     139                                        {
     140                                                def = definition[ i ];
     141                                                var names = def.names;
     142                                                if( def.base )
     143                                                {
     144                                                        var j, s = names.length;
     145                                                        for( j = 0 ; j < s ; j++ )
     146                                                        {
     147                                                                this.addExternal( names[ j ], def.base );
     148                                                        }
     149                                                }
     150                                                allNames = allNames.concat( names );
     151                                        }
     152                                        return allNames;
     153                                }
     154                        }, true );
     155})();
     156
  • _source/plugins/toolbar/plugin.js

     
    207207[
    208208        [
    209209                'Source', '-',
    210                 'NewPage', '-',
     210                'NewPage', 'Templates', '-',
    211211                'Bold', 'Italic', 'Underline', 'Strike', '-',
    212212                'Subscript', 'Superscript', '-',
    213213                'SelectAll', 'RemoveFormat', '-',
  • _source/core/dom/domobject.js

     
    165165                var expandoNumber = this.$._cke_expando,
    166166                        dataSlot = expandoNumber && customData[ expandoNumber ];
    167167
    168                 return ( dataSlot && dataSlot[ key ] ) || null;
     168                if ( dataSlot && ( dataSlot[ key ] !== null  ) )
     169                        return dataSlot[ key ];
     170                else
     171                        return null;
    169172        };
    170173
    171174        // Implement CKEDITOR.event.
  • _source/core/tools.js

     
    310310                                return i;
    311311                }
    312312                return -1;
     313        },
     314        /**
     315         * Binds a function with an object as its this reference.
     316         *
     317         * @param {Function}
     318         *            func The function to be bounded.
     319         * @param {Object}
     320         *            obj This this reference to bind to the function.
     321         * @returns {Function} The bound function.
     322         */
     323        bind : function ( func, obj )
     324        {
     325                return function ( )
     326                {
     327                        return func.apply( obj , arguments );
     328                }
    313329        }
    314330};
    315331
  • _source/core/config.js

     
    146146         * @example
    147147         * config.plugins = 'basicstyles,button,htmldataprocessor,toolbar,wysiwygarea';
    148148         */
    149         plugins : 'basicstyles,button,elementspath,horizontalrule,htmldataprocessor,keystrokes,newpage,pagebreak,removeformat,smiley,sourcearea,specialchar,tab,toolbar,wysiwygarea',
     149        plugins : 'basicstyles,button,elementspath,horizontalrule,htmldataprocessor,keystrokes,newpage,pagebreak,removeformat,smiley,sourcearea,specialchar,tab,toolbar,wysiwygarea,templates',
    150150
    151151        /**
    152152         * The theme to be used to build the UI.
  • _source/lang/en.js

     
    329329                chkLoop         : 'Loop',
    330330                chkMenu         : 'Enable Flash Menu',
    331331                chkFull         : 'Allow Fullscreen',
    332                 scale           : 'Scale',
     332                scale           : 'Scale',
    333333                scaleAll                : 'Show all',
    334334                scaleNoBorder   : 'No Border',
    335335                scaleFit                : 'Exact Fit',
     
    366366        elementsPath :
    367367        {
    368368                eleTitle : '%1 element'
     369        },
     370       
     371        templates :
     372        {
     373                title : 'Content Templates',
     374                insertOption: 'Replace actual cotents'
    369375        }
    370376};
  • _source/skins/default/toolbar.css

     
    305305{
    306306        background-position: 0 -880px;
    307307}
     308.cke_skin_default a.cke_button_templates .cke_icon
     309{
     310        background-position: 0 -80px;
     311}
  • _source/skins/default/skin.js

     
    2222        return {
    2323                preload : preload,
    2424                editor : { css : [ 'editor.css' ] },
    25                 dialog : { css : [ 'dialog.css' ],  js : dialogJs }
     25                dialog : { css : [ 'dialog.css' ],  js : dialogJs },
     26                templates : {css : [ 'templates.css' ]}
    2627        };
    2728})() );
    2829
  • _source/skins/default/templates.css

     
     1.cke_skin_default .cke_tpl_list
     2{
     3        border: #dcdcdc 2px solid;
     4        background-color: #ffffff;
     5        overflow: auto;
     6        width: 100%;
     7        height: 220px;
     8}
     9
     10.cke_skin_default .cke_tpl_item
     11{
     12        margin: 5px;
     13        padding: 7px;
     14        border: #eeeeee 1px solid;
     15        *width: 88%;
     16}
     17
     18.cke_skin_default .cke_tpl_preview
     19{
     20        border-collapse: separate;
     21        text-indent:0;
     22        width: 100%;
     23}
     24.cke_skin_default .cke_tpl_preview td
     25{
     26        padding: 2px;
     27        vertical-align: middle;
     28}
     29.cke_skin_default .cke_tpl_preview .cke_tpl_preview_img
     30{
     31        width: 100px;
     32}
     33.cke_skin_default .cke_tpl_preview span
     34{
     35        white-space: normal;
     36}
     37
     38.cke_skin_default .cke_tpl_title
     39{
     40        font-weight: bold;
     41}
     42
     43.cke_skin_default .cke_tpl_hover
     44{
     45        border: #ff9933 1px solid !important;
     46        background-color: #fffacd !important;
     47        cursor: pointer;
     48        cursor: hand;
     49}
     50/*
     51 * Fix property 'cursor' doesn't inherit on table
     52 */
     53.cke_skin_default .cke_tpl_hover *
     54{
     55        cursor: inherit;
     56}
     57
     58.cke_skin_default .cke_tpl_empty, .cke_tpl_loading
     59{
     60        text-align: center;
     61        padding: 5px;
     62}
  • _source/templates/default/template.js

     
     1CKEDITOR.templates.add( 'default', {
     2        'imageBase' : 'images',
     3        'templates' : [
     4        {
     5                'title': 'Image and Title',
     6                'image': 'template1.gif',
     7                'description': 'One main image with a title and text that surround the image.',
     8                'content': '<img style="MARGIN-RIGHT: 10px" height="100" alt="" width="100" align="left"\/> <h3>Type the title here<\/h3> Type the text here '
     9        },
     10        {
     11                'title': 'Strange Template',
     12                'image': 'template2.gif',
     13                'description': 'A template that defines two colums, each one with a title, and some text.',
     14                '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.'
     15        },
     16        {
     17                'title': 'Text and Table',
     18                'image': 'template3.gif',
     19                'description': 'A title with some text and a table.',
     20                '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>'
     21        }
     22        ]
     23} );
     24
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy