|
1 /** |
|
2 * plugin.js |
|
3 * |
|
4 * Copyright, Moxiecode Systems AB |
|
5 * Released under LGPL License. |
|
6 * |
|
7 * License: http://www.tinymce.com/license |
|
8 * Contributing: http://www.tinymce.com/contributing |
|
9 */ |
|
10 |
|
11 /*global tinymce:true */ |
|
12 |
|
13 tinymce.PluginManager.add('template', function(editor) { |
|
14 var each = tinymce.each; |
|
15 |
|
16 function createTemplateList(callback) { |
|
17 return function() { |
|
18 var templateList = editor.settings.templates; |
|
19 |
|
20 if (typeof templateList == "string") { |
|
21 tinymce.util.XHR.send({ |
|
22 url: templateList, |
|
23 success: function(text) { |
|
24 callback(tinymce.util.JSON.parse(text)); |
|
25 } |
|
26 }); |
|
27 } else { |
|
28 callback(templateList); |
|
29 } |
|
30 }; |
|
31 } |
|
32 |
|
33 function showDialog(templateList) { |
|
34 var win, values = [], templateHtml; |
|
35 |
|
36 if (!templateList || templateList.length === 0) { |
|
37 editor.windowManager.alert('No templates defined'); |
|
38 return; |
|
39 } |
|
40 |
|
41 tinymce.each(templateList, function(template) { |
|
42 values.push({ |
|
43 selected: !values.length, |
|
44 text: template.title, |
|
45 value: { |
|
46 url: template.url, |
|
47 content: template.content, |
|
48 description: template.description |
|
49 } |
|
50 }); |
|
51 }); |
|
52 |
|
53 function onSelectTemplate(e) { |
|
54 var value = e.control.value(); |
|
55 |
|
56 function insertIframeHtml(html) { |
|
57 if (html.indexOf('<html>') == -1) { |
|
58 var contentCssLinks = ''; |
|
59 |
|
60 tinymce.each(editor.contentCSS, function(url) { |
|
61 contentCssLinks += '<link type="text/css" rel="stylesheet" href="' + editor.documentBaseURI.toAbsolute(url) + '">'; |
|
62 }); |
|
63 |
|
64 html = ( |
|
65 '<!DOCTYPE html>' + |
|
66 '<html>' + |
|
67 '<head>' + |
|
68 contentCssLinks + |
|
69 '</head>' + |
|
70 '<body>' + |
|
71 html + |
|
72 '</body>' + |
|
73 '</html>' |
|
74 ); |
|
75 } |
|
76 |
|
77 html = replaceTemplateValues(html, 'template_preview_replace_values'); |
|
78 |
|
79 var doc = win.find('iframe')[0].getEl().contentWindow.document; |
|
80 doc.open(); |
|
81 doc.write(html); |
|
82 doc.close(); |
|
83 } |
|
84 |
|
85 if (value.url) { |
|
86 tinymce.util.XHR.send({ |
|
87 url: value.url, |
|
88 success: function(html) { |
|
89 templateHtml = html; |
|
90 insertIframeHtml(templateHtml); |
|
91 } |
|
92 }); |
|
93 } else { |
|
94 templateHtml = value.content; |
|
95 insertIframeHtml(templateHtml); |
|
96 } |
|
97 |
|
98 win.find('#description')[0].text(e.control.value().description); |
|
99 } |
|
100 |
|
101 win = editor.windowManager.open({ |
|
102 title: 'Insert template', |
|
103 layout: 'flex', |
|
104 direction: 'column', |
|
105 align: 'stretch', |
|
106 padding: 15, |
|
107 spacing: 10, |
|
108 |
|
109 items: [ |
|
110 {type: 'form', flex: 0, padding: 0, items: [ |
|
111 {type: 'container', label: 'Templates', items: { |
|
112 type: 'listbox', label: 'Templates', name: 'template', values: values, onselect: onSelectTemplate |
|
113 }} |
|
114 ]}, |
|
115 {type: 'label', name: 'description', label: 'Description', text: '\u00a0'}, |
|
116 {type: 'iframe', flex: 1, border: 1} |
|
117 ], |
|
118 |
|
119 onsubmit: function() { |
|
120 insertTemplate(false, templateHtml); |
|
121 }, |
|
122 |
|
123 width: editor.getParam('template_popup_width', 600), |
|
124 height: editor.getParam('template_popup_height', 500) |
|
125 }); |
|
126 |
|
127 win.find('listbox')[0].fire('select'); |
|
128 } |
|
129 |
|
130 function getDateTime(fmt, date) { |
|
131 var daysShort = "Sun Mon Tue Wed Thu Fri Sat Sun".split(' '); |
|
132 var daysLong = "Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sunday".split(' '); |
|
133 var monthsShort = "Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec".split(' '); |
|
134 var monthsLong = "January February March April May June July August September October November December".split(' '); |
|
135 |
|
136 function addZeros(value, len) { |
|
137 value = "" + value; |
|
138 |
|
139 if (value.length < len) { |
|
140 for (var i = 0; i < (len - value.length); i++) { |
|
141 value = "0" + value; |
|
142 } |
|
143 } |
|
144 |
|
145 return value; |
|
146 } |
|
147 |
|
148 date = date || new Date(); |
|
149 |
|
150 fmt = fmt.replace("%D", "%m/%d/%Y"); |
|
151 fmt = fmt.replace("%r", "%I:%M:%S %p"); |
|
152 fmt = fmt.replace("%Y", "" + date.getFullYear()); |
|
153 fmt = fmt.replace("%y", "" + date.getYear()); |
|
154 fmt = fmt.replace("%m", addZeros(date.getMonth() + 1, 2)); |
|
155 fmt = fmt.replace("%d", addZeros(date.getDate(), 2)); |
|
156 fmt = fmt.replace("%H", "" + addZeros(date.getHours(), 2)); |
|
157 fmt = fmt.replace("%M", "" + addZeros(date.getMinutes(), 2)); |
|
158 fmt = fmt.replace("%S", "" + addZeros(date.getSeconds(), 2)); |
|
159 fmt = fmt.replace("%I", "" + ((date.getHours() + 11) % 12 + 1)); |
|
160 fmt = fmt.replace("%p", "" + (date.getHours() < 12 ? "AM" : "PM")); |
|
161 fmt = fmt.replace("%B", "" + editor.translate(monthsLong[date.getMonth()])); |
|
162 fmt = fmt.replace("%b", "" + editor.translate(monthsShort[date.getMonth()])); |
|
163 fmt = fmt.replace("%A", "" + editor.translate(daysLong[date.getDay()])); |
|
164 fmt = fmt.replace("%a", "" + editor.translate(daysShort[date.getDay()])); |
|
165 fmt = fmt.replace("%%", "%"); |
|
166 |
|
167 return fmt; |
|
168 } |
|
169 |
|
170 function replaceVals(e) { |
|
171 var dom = editor.dom, vl = editor.getParam('template_replace_values'); |
|
172 |
|
173 each(dom.select('*', e), function(e) { |
|
174 each(vl, function(v, k) { |
|
175 if (dom.hasClass(e, k)) { |
|
176 if (typeof vl[k] == 'function') { |
|
177 vl[k](e); |
|
178 } |
|
179 } |
|
180 }); |
|
181 }); |
|
182 } |
|
183 |
|
184 function replaceTemplateValues(html, templateValuesOptionName) { |
|
185 each(editor.getParam(templateValuesOptionName), function(v, k) { |
|
186 if (typeof v != 'function') { |
|
187 html = html.replace(new RegExp('\\{\\$' + k + '\\}', 'g'), v); |
|
188 } |
|
189 }); |
|
190 |
|
191 return html; |
|
192 } |
|
193 |
|
194 function insertTemplate(ui, html) { |
|
195 var el, n, dom = editor.dom, sel = editor.selection.getContent(); |
|
196 |
|
197 html = replaceTemplateValues(html, 'template_replace_values'); |
|
198 el = dom.create('div', null, html); |
|
199 |
|
200 // Find template element within div |
|
201 n = dom.select('.mceTmpl', el); |
|
202 if (n && n.length > 0) { |
|
203 el = dom.create('div', null); |
|
204 el.appendChild(n[0].cloneNode(true)); |
|
205 } |
|
206 |
|
207 function hasClass(n, c) { |
|
208 return new RegExp('\\b' + c + '\\b', 'g').test(n.className); |
|
209 } |
|
210 |
|
211 each(dom.select('*', el), function(n) { |
|
212 // Replace cdate |
|
213 if (hasClass(n, editor.getParam('template_cdate_classes', 'cdate').replace(/\s+/g, '|'))) { |
|
214 n.innerHTML = getDateTime(editor.getParam("template_cdate_format", editor.getLang("template.cdate_format"))); |
|
215 } |
|
216 |
|
217 // Replace mdate |
|
218 if (hasClass(n, editor.getParam('template_mdate_classes', 'mdate').replace(/\s+/g, '|'))) { |
|
219 n.innerHTML = getDateTime(editor.getParam("template_mdate_format", editor.getLang("template.mdate_format"))); |
|
220 } |
|
221 |
|
222 // Replace selection |
|
223 if (hasClass(n, editor.getParam('template_selected_content_classes', 'selcontent').replace(/\s+/g, '|'))) { |
|
224 n.innerHTML = sel; |
|
225 } |
|
226 }); |
|
227 |
|
228 replaceVals(el); |
|
229 |
|
230 editor.execCommand('mceInsertContent', false, el.innerHTML); |
|
231 editor.addVisual(); |
|
232 } |
|
233 |
|
234 editor.addCommand('mceInsertTemplate', insertTemplate); |
|
235 |
|
236 editor.addButton('template', { |
|
237 title: 'Insert template', |
|
238 onclick: createTemplateList(showDialog) |
|
239 }); |
|
240 |
|
241 editor.addMenuItem('template', { |
|
242 text: 'Insert template', |
|
243 onclick: createTemplateList(showDialog), |
|
244 context: 'insert' |
|
245 }); |
|
246 |
|
247 editor.on('PreProcess', function(o) { |
|
248 var dom = editor.dom; |
|
249 |
|
250 each(dom.select('div', o.node), function(e) { |
|
251 if (dom.hasClass(e, 'mceTmpl')) { |
|
252 each(dom.select('*', e), function(e) { |
|
253 if (dom.hasClass(e, editor.getParam('template_mdate_classes', 'mdate').replace(/\s+/g, '|'))) { |
|
254 e.innerHTML = getDateTime(editor.getParam("template_mdate_format", editor.getLang("template.mdate_format"))); |
|
255 } |
|
256 }); |
|
257 |
|
258 replaceVals(e); |
|
259 } |
|
260 }); |
|
261 }); |
|
262 }); |