plugin.js 7.0 KB

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