Ticket #2879: 2879_2.patch

File 2879_2.patch, 15.2 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        var doc = CKEDITOR.document;
     9        /**
     10         * Construct the HTML view of the specified tempaltes data.
     11         * @param {Array} tempaltes
     12         */
     13        function renderTemplatesList( templates, onSelectTemplateFunc )
     14        {
     15                var template;
     16                var listCtEl = doc.getById( 'eList' );
     17
     18                // clear loading wait text.
     19                listCtEl.setHtml( '' );
     20
     21                // evaluate templates preview list
     22                var i, l = templates.length;
     23                for( i = 0 ; i < l ; i++ )
     24                {
     25                        template = templates[ i ];
     26
     27                        var itemEl = listCtEl.append( doc.createElement( 'div' ) );
     28                        itemEl.setCustomData( 'cke_tpl_index', template.id );
     29                        itemEl.setAttribute( 'class', 'cke_tpl_item' );
     30
     31                        // Build the inner HTML of our new item DIV.
     32                        var tplHTML = '<table class="cke_tpl_preview"><tr>';
     33
     34                        if( template.image )
     35                                tplHTML += '<td class="cke_tpl_preview_img"><img src="' + template.image + '"><\/td>';
     36
     37                        tplHTML += '<td><span class="cke_tpl_title">' + template.title + '<\/span><br/>';
     38
     39                        if( template.description )
     40                                tplHTML += '<span>' + template.description + '<\/span>';
     41
     42                        tplHTML += '<\/td><\/tr><\/table>';
     43
     44                        itemEl.setHtml( tplHTML );
     45
     46                        itemEl.on( 'mouseover', function()
     47                        {
     48                                this.addClass( 'cke_tpl_hover' );
     49                        }, itemEl );
     50
     51                        itemEl.on( 'mouseout', function()
     52                        {
     53                                this.removeClass( 'cke_tpl_hover' );
     54                        }, itemEl );
     55
     56                        itemEl.on( 'click', function()
     57                        {
     58                                onSelectTemplateFunc( this.getCustomData( 'cke_tpl_index' ) );
     59                        }, itemEl );
     60
     61                }
     62        }
     63
     64        /**
     65         * Construct the HTML view of none templates.
     66         */
     67        function renderEmpty()
     68        {
     69                var listCtEl = doc.getById( 'eList' );
     70                listCtEl.setHtml( emptyHTML );
     71        }
     72
     73        CKEDITOR.dialog
     74                .add(
     75                        'templates',
     76                        function( editor )
     77                        {
     78                                // Load skin at first.
     79                                CKEDITOR.skins.load( 'default', 'templates' );
     80
     81                                var promptHTML = '<span>'  +
     82                                editor.lang.templates.selectPromptMsg + '<\/span>';
     83                                var previewHTML = '<div id="eList" class="cke_tpl_list">' +
     84                                '<div class="cke_tpl_loading"><span><\/span><\/div><\/div>';
     85                                var emptyHTML = '<div class="cke_tpl_empty">' +
     86                                        '<span>' + editor.lang.templates.emptyListMsg +
     87                                        '<\/span><\/div>';
     88                               
     89                                /**
     90                                 * Load templates once.
     91                                 */
     92                                var isLoaded = false;
     93                                return {
     94
     95                                        title :editor.lang.templates.title,
     96                                        minWidth :450,
     97                                        minHeight :400,
     98                                        contents : [
     99                                        {
     100                                                id :'selectTpl',
     101                                                label :editor.lang.templates.title,
     102                                                accessKey :'I',
     103                                                elements :
     104                                                [
     105                                                {
     106                                                        type :'vbox',
     107                                                        padding :5,
     108                                                        children :
     109                                                        [
     110                                                                {
     111                                                                        type :'html',
     112                                                                        html :promptHTML
     113                                                                },
     114                                                                {
     115                                                                        type :'html',
     116                                                                        html :previewHTML
     117                                                                },
     118                                                                {
     119                                                                        id :'chkInsertOpt',
     120                                                                        type :'checkbox',
     121                                                                        label :editor.lang.templates.insertOption,
     122                                                                        checked :editor.config.templates_replaceContent,
     123                                                                        'default' :editor.config.templates_replaceContent
     124                                                                }
     125                                                        ]
     126                                                }
     127                                                ]
     128                                        }
     129                                        ],
     130                                        buttons : [ CKEDITOR.dialog.cancelButton ],
     131                                        onShow : function()
     132                                        {
     133                                                var self = this;
     134                                                // Load template contents.
     135                                                if( !isLoaded )
     136                                                {
     137                                                        CKEDITOR.templates.loadTemplates( editor, function( templates ) {
     138       
     139                                                                if( templates.length )
     140                                                                {
     141                                                                        /**
     142                                                                         * Insert the specified template content
     143                                                                         * to document.
     144                                                                         * @param {Number} index
     145                                                                         */
     146                                                                        function insertTemplate( index )
     147                                                                        {
     148                                                                                var isInsert = this.getValueOf(
     149                                                                                        'selectTpl', 'chkInsertOpt' ), content = templates[ index ].content;
     150
     151                                                                                if( isInsert )
     152                                                                                {
     153                                                                                        // reload editor data is asynchronous.
     154                                                                                        editor.on( 'contentDom',function(){
     155                                                                                               
     156                                                                                                        if(CKEDITOR.env.ie)
     157                                                                                                                this.saveSelection();
     158                                                                                                               
     159                                                                                                        this.hide();
     160                                                                                                }, this );
     161                                                                                        editor.setData( content );
     162                                                                                }
     163                                                                                else
     164                                                                                {
     165                                                                                        if(CKEDITOR.env.ie)
     166                                                                                                this.restoreSelection();
     167                                                                                               
     168                                                                                        editor.insertHtml( content );
     169                                                                                       
     170                                                                                        if(CKEDITOR.env.ie)
     171                                                                                                this.saveSelection();
     172                                                                                        this.hide();
     173                                                                                }
     174                                                                        }
     175
     176                                                                        renderTemplatesList( templates,
     177                                                                                CKEDITOR.tools.bind( insertTemplate, self ) );
     178                                                                }
     179                                                                else
     180                                                                        renderEmpty();
     181
     182                                                                isLoaded = true;
     183                                                        } );
     184                                        }
     185                                }
     186                                };
     187                        } );
     188} )();
     189
     190
  • _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
     6( function(){
     7       
     8        CKEDITOR.plugins.add( 'templates', {
     9                requires : [ 'dialog' ],
     10
     11                init : function( editor )
     12                {
     13
     14                        CKEDITOR.dialog.add( 'templates',
     15                                this.path + 'dialogs/templates.js' );
     16                        editor.addCommand( 'templates', new CKEDITOR.dialogCommand(
     17                                'templates' ) );
     18                        editor.ui.addButton( 'Templates', {
     19                                label :editor.lang.common.templates,
     20                                command :'templates'
     21                        } );
     22                }
     23        } );
     24} )();
     25
     26CKEDITOR.tools.extend( CKEDITOR.config,
     27{
     28        /**
     29         * Whether replace the current document content OR insert current
     30         * editing position.
     31         *
     32         * @type Boolean
     33         * @default true
     34         */
     35        templates_replaceContent :true,
     36
     37        /**
     38         * The default base folder used in {@config templates_repository}
     39         * Note : This config could not be modified by editor instances.
     40         * @type String
     41         * @default "templates"
     42         */
     43        templates_defaultDir :'templates',
     44
     45        /**
     46         * Templates definition files repository location. Note: template definition
     47         * will be loaded only once, restart the editor to update to new changes.
     48         * @type Array
     49         * @default [{names : [ 'default' ]}]
     50         */
     51        templates_repository :
     52        [
     53//      {
     54//              //The URL  point to the repository root.
     55//              base: 'http://www.somesite.com/repository/',
     56//             
     57//              // Template name list is a collection of template definition files which mapping
     58//              // to the location of each file named 'template.js' right under the folder which
     59//              // has the name with template name. The absolute position is resolved to
     60//              // e.g.'http://www.somesite.com/repository/mytemplate2/template.js'.
     61//              names: ['mytemplate1', 'mytemplate2']
     62//      },
     63        {
     64//      base: 'templates',
     65                names : [ 'default' ]
     66        }
     67        ]
     68} );
     69
     70CKEDITOR.templates = new CKEDITOR.resourceManager(
     71        '_source/' + // %REMOVE_LINE%
     72        CKEDITOR.config.templates_defaultDir + '/' , 'template' );
     73
     74CKEDITOR.tools.extend(CKEDITOR.templates,
     75{
     76        /**
     77         * Use external as base path when resolving paths.
     78         * @override
     79         */
     80        getPath : function( name )
     81        {
     82                return ( this.externals[ name ] || this.basePath ) + name
     83                        + '/';
     84        },
     85        /**
     86         * Load all the templates files assigned by the editor
     87         * configuration.
     88         * @param {Functoin}
     89         *            callback
     90         */
     91        loadTemplates : function( editor, callback )
     92        {
     93                /**
     94                 * Hold the loaded template definitions.
     95                 * @type {Array}
     96                 */
     97                var loadedTemplates = [];
     98
     99                var names = this.resolveExternalTemplates( editor.config.templates_repository );
     100
     101                this.load( names, function( resources )
     102                                {
     103
     104                                        // resolve real image base path.
     105                                        var name, basePath, templateDefinition, templates, template, indexBase = 0;
     106                                        for( name in resources )
     107                                        {
     108                                                templateDefinition = resources[ name ];
     109                                                if( !templateDefinition.loaded )
     110                                                {
     111
     112                                                        basePath = templateDefinition.imageBase || 'images';
     113                                                        templateDefinition.imageBase = CKEDITOR
     114                                                                .getUrl( this.getPath( name ) + basePath );
     115                                                }
     116                                                templates = templateDefinition.templates;
     117                                                var i, l = templates.length;
     118
     119                                                for( i = 0 ; i < l ; i++ )
     120                                                {
     121                                                        template = templates[ i ];
     122                                                        if( !templateDefinition.loaded )
     123                                                        {
     124                                                                template.image = templateDefinition.imageBase
     125                                                                        + '/' + template.image;
     126                                                        }
     127                                                        template.id = indexBase + i;
     128                                                        loadedTemplates.push( template );
     129                                                }
     130                                                templateDefinition.loaded = true;
     131                                                indexBase += l;
     132                                        }
     133
     134                                        callback( loadedTemplates );
     135                                }, this );
     136        },
     137        /**
     138         * Preprocess all external templates.
     139         */
     140        resolveExternalTemplates : function( definition )
     141        {
     142                var allNames = [];
     143                var i, l = definition.length;
     144                var def;
     145                for( i = 0 ; i < l ; i++ )
     146                {
     147                        def = definition[ i ];
     148                        var names = def.names;
     149                        if( def.base )
     150                        {
     151                                var j, s = names.length;
     152                                for( j = 0 ; j < s ; j++ )
     153                                {
     154                                        this.addExternal( names[ j ], def.base );
     155                                }
     156                        }
     157                        allNames = allNames.concat( names );
     158                }
     159                return allNames;
     160        }
     161}, true );
  • _source/plugins/toolbar/plugin.js

     
    207207[
    208208        [
    209209                'Source', '-',
    210                 'NewPage', 'Preview', '-',
     210                'NewPage', 'Preview', 'Templates', '-',
    211211                'Bold', 'Italic', 'Underline', 'Strike', '-',
    212212                'NumberedList', 'BulletedList', '-',
    213213                'Outdent', 'Indent', 'Blockquote', '-',
  • _source/core/config.js

     
    147147         * config.plugins = 'basicstyles,button,htmldataprocessor,toolbar,wysiwygarea';
    148148         */
    149149
    150         plugins : 'basicstyles,button,elementspath,horizontalrule,htmldataprocessor,keystrokes,newpage,pagebreak,preview,removeformat,smiley,indent,link,list,justify,blockquote,sourcearea,table,specialchar,tab,toolbar,wysiwygarea',
     150        plugins : 'basicstyles,button,elementspath,horizontalrule,htmldataprocessor,keystrokes,newpage,pagebreak,preview,removeformat,smiley,indent,link,list,justify,blockquote,sourcearea,table,specialchar,tab,toolbar,wysiwygarea,templates',
    151151
    152152        /**
    153153         * The theme to be used to build the UI.
  • _source/lang/en.js

     
    390390        },
    391391
    392392        outdent : 'Decrease Indent',
    393         blockquote : 'Blockquote'
     393        blockquote : 'Blockquote',
     394        templates :
     395        {
     396                title : 'Content Templates',
     397                insertOption: 'Replace actual cotents',
     398                selectPromptMsg: 'Please select the template to open in the editor',
     399                emptyListMsg : '(No templates defined)'
     400        }
    394401};
  • _source/skins/default/toolbar.css

     
    310310{
    311311        background-position: 0 -880px;
    312312}
     313.cke_skin_default a.cke_button_templates .cke_icon
     314{
     315        background-position: 0 -80px;
     316}
    313317
    314318.cke_skin_default a.cke_button_numberedlist .cke_icon
    315319{
  • _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        //The name of sub folder which hold the shortcut preview image of this template
     3//      'imageBase' : 'images',
     4        'templates' : [
     5        {
     6                'title': 'Image and Title',
     7                'image': 'template1.gif',
     8                'description': 'One main image with a title and text that surround the image.',
     9                'content': '<img style="MARGIN-RIGHT: 10px" height="100" alt="" width="100" align="left"\/> <h3>Type the title here<\/h3> Type the text here '
     10        },
     11        {
     12                'title': 'Strange Template',
     13                'image': 'template2.gif',
     14                'description': 'A template that defines two colums, each one with a title, and some text.',
     15                '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.'
     16        },
     17        {
     18                'title': 'Text and Table',
     19                'image': 'template3.gif',
     20                'description': 'A title with some text and a table.',
     21                '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>'
     22        }
     23        ]
     24} );
     25
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy