1 | /*
|
---|
2 | Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
|
---|
3 | For licensing, see LICENSE.html or http://ckeditor.com/license
|
---|
4 | */
|
---|
5 |
|
---|
6 | (function()
|
---|
7 | {
|
---|
8 | var doc = CKEDITOR.document;
|
---|
9 |
|
---|
10 | var listId = 'cke' + CKEDITOR.tools.getNextNumber();
|
---|
11 |
|
---|
12 | // Constructs the HTML view of the specified templates data.
|
---|
13 | function renderTemplatesList( editor, templatesDefinitions )
|
---|
14 | {
|
---|
15 | var listDiv = doc.getById( listId );
|
---|
16 |
|
---|
17 | // clear loading wait text.
|
---|
18 | listDiv.setHtml( '' );
|
---|
19 |
|
---|
20 | for ( var i = 0 ; i < templatesDefinitions.length ; i++ )
|
---|
21 | {
|
---|
22 | var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),
|
---|
23 | imagesPath = definition.imagesPath,
|
---|
24 | templates = definition.templates;
|
---|
25 |
|
---|
26 | for ( var j = 0 ; j < templates.length ; j++ )
|
---|
27 | {
|
---|
28 | var template = templates[ j ];
|
---|
29 | listDiv.append( createTemplateItem( editor, template, imagesPath ) );
|
---|
30 | }
|
---|
31 | }
|
---|
32 | }
|
---|
33 |
|
---|
34 | function createTemplateItem( editor, template, imagesPath )
|
---|
35 | {
|
---|
36 | var div = doc.createElement( 'div' );
|
---|
37 | div.setAttribute( 'class', 'cke_tpl_item' );
|
---|
38 |
|
---|
39 | // Build the inner HTML of our new item DIV.
|
---|
40 | var html = '<table style="width:350px;" class="cke_tpl_preview"><tr>';
|
---|
41 |
|
---|
42 | if( template.image && imagesPath )
|
---|
43 | html += '<td class="cke_tpl_preview_img"><img src="' + CKEDITOR.getUrl( imagesPath + template.image ) + '"></td>';
|
---|
44 |
|
---|
45 | html += '<td style="white-space:normal;"><span class="cke_tpl_title">' + template.title + '</span><br/>';
|
---|
46 |
|
---|
47 | if( template.description )
|
---|
48 | html += '<span>' + template.description + '</span>';
|
---|
49 |
|
---|
50 | html += '</td></tr></table>';
|
---|
51 |
|
---|
52 | div.setHtml( html );
|
---|
53 |
|
---|
54 | div.on( 'mouseover', function()
|
---|
55 | {
|
---|
56 | div.addClass( 'cke_tpl_hover' );
|
---|
57 | });
|
---|
58 |
|
---|
59 | div.on( 'mouseout', function()
|
---|
60 | {
|
---|
61 | div.removeClass( 'cke_tpl_hover' );
|
---|
62 | });
|
---|
63 |
|
---|
64 | div.on( 'click', function()
|
---|
65 | {
|
---|
66 | insertTemplate( editor, template.html );
|
---|
67 | });
|
---|
68 |
|
---|
69 | return div;
|
---|
70 | }
|
---|
71 |
|
---|
72 | /**
|
---|
73 | * Insert the specified template content
|
---|
74 | * to document.
|
---|
75 | * @param {Number} index
|
---|
76 | */
|
---|
77 | function insertTemplate( editor, html )
|
---|
78 | {
|
---|
79 | var dialog = CKEDITOR.dialog.getCurrent(),
|
---|
80 | isInsert = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );
|
---|
81 |
|
---|
82 | if( isInsert )
|
---|
83 | {
|
---|
84 | editor.setData( html );
|
---|
85 | }
|
---|
86 | else
|
---|
87 | {
|
---|
88 | editor.insertHtml( html );
|
---|
89 | }
|
---|
90 |
|
---|
91 | dialog.hide();
|
---|
92 | }
|
---|
93 |
|
---|
94 | CKEDITOR.dialog.add( 'templates', function( editor )
|
---|
95 | {
|
---|
96 | // Load skin at first.
|
---|
97 | CKEDITOR.skins.load( editor, 'templates' );
|
---|
98 |
|
---|
99 | /**
|
---|
100 | * Load templates once.
|
---|
101 | */
|
---|
102 | var isLoaded = false;
|
---|
103 |
|
---|
104 | return {
|
---|
105 | title :editor.lang.templates.title,
|
---|
106 |
|
---|
107 | minWidth : CKEDITOR.env.ie ? 440 : 400,
|
---|
108 | minHeight : 340,
|
---|
109 |
|
---|
110 | contents :
|
---|
111 | [
|
---|
112 | {
|
---|
113 | id :'selectTpl',
|
---|
114 | label : editor.lang.templates.title,
|
---|
115 | elements :
|
---|
116 | [
|
---|
117 | {
|
---|
118 | type : 'vbox',
|
---|
119 | padding : 5,
|
---|
120 | children :
|
---|
121 | [
|
---|
122 | {
|
---|
123 | type : 'html',
|
---|
124 | html :
|
---|
125 | '<span>' +
|
---|
126 | editor.lang.templates.selectPromptMsg +
|
---|
127 | '</span>'
|
---|
128 | },
|
---|
129 | {
|
---|
130 | type : 'html',
|
---|
131 | html :
|
---|
132 | '<div id="' + listId + '" class="cke_tpl_list">' +
|
---|
133 | '<div class="cke_tpl_loading"><span></span></div>' +
|
---|
134 | '</div>'
|
---|
135 | },
|
---|
136 | {
|
---|
137 | id : 'chkInsertOpt',
|
---|
138 | type : 'checkbox',
|
---|
139 | label : editor.lang.templates.insertOption,
|
---|
140 | 'default' : editor.config.templates_replaceContent
|
---|
141 | }
|
---|
142 | ]
|
---|
143 | }
|
---|
144 | ]
|
---|
145 | }
|
---|
146 | ],
|
---|
147 |
|
---|
148 | buttons : [ CKEDITOR.dialog.cancelButton ],
|
---|
149 |
|
---|
150 | onShow : function()
|
---|
151 | {
|
---|
152 | CKEDITOR.loadTemplates( editor.config.templates_files, function()
|
---|
153 | {
|
---|
154 | var templates = editor.config.templates.split( ',' );
|
---|
155 |
|
---|
156 | if ( templates.length )
|
---|
157 | renderTemplatesList( editor, templates );
|
---|
158 | else
|
---|
159 | {
|
---|
160 | var listCtEl = doc.getById( listId );
|
---|
161 | listCtEl.setHtml(
|
---|
162 | '<div class="cke_tpl_empty">' +
|
---|
163 | '<span>' + editor.lang.templates.emptyListMsg + '</span>' +
|
---|
164 | '</div>' );
|
---|
165 | }
|
---|
166 | });
|
---|
167 | }
|
---|
168 | };
|
---|
169 | });
|
---|
170 | })();
|
---|