Rev 609 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed
/*** $Id: editor_plugin_src.js 162 2007-01-03 16:16:52Z spocke $** @author Moxiecode* @copyright Copyright © 2004-2007, Moxiecode Systems AB, All rights reserved.*/tinyMCE.importPluginLanguagePack('template');var TinyMCE_TemplatePlugin = {getInfo : function() {return {longname : 'Template plugin',author : 'Moxiecode Systems AB',authorurl : 'http://www.moxiecode.com',infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/template',version : tinyMCE.majorVersion + "." + tinyMCE.minorVersion};},initInstance : function(inst) {var cdate, mdate, content, x = 0, key, value, rvals, ds = inst.getData('template');// ensure the required elements and sttributes are added//inst.cleanup.addRuleStr('*[' + TinyMCE_TemplatePlugin.TMPL_DATE_SRC_ATTR + '],div[title,tsrc]');//setup template content functions// creation date and modified date classescdate = tinyMCE.getParam("template_cdate_classes", '').split(/\s+/);mdate = tinyMCE.getParam("template_mdate_classes", '').split(/\s+/);// classes that specify where selected content should gocontent = tinyMCE.getParam("template_selected_content_classes", '').split(/\s+/);for (x = 0; x < cdate.length; x++)TinyMCE_TemplatePlugin.functions[cdate[x]] = TinyMCE_TemplatePlugin.functions['cdate'];for (x = 0; x < mdate.length; x++)TinyMCE_TemplatePlugin.functions[mdate[x]] = TinyMCE_TemplatePlugin.functions['mdate'];for (x = 0; x < content.length; x++)TinyMCE_TemplatePlugin.functions[content[x]] = TinyMCE_TemplatePlugin.functions['selectedContent'];// special template functions for replacing template contentrvals = tinyMCE.getParam("template_replace_values", false);for (key in rvals) {value = rvals[key];if (typeof value == "function")TinyMCE_TemplatePlugin.functions[key] = value;elseTinyMCE_TemplatePlugin.functions[key] = TinyMCE_TemplatePlugin.functions['generateReplacer'](value);}// Setup replace_itemsrvals = tinyMCE.getParam("template_replace_values", false);ds.replace_items = {};for (key in rvals)ds.replace_items[key] = rvals[key];inst.addShortcut('ctrl', 't', 'lang_template_desc', 'mceTemplate');// Setup data storageds.currentAction = "insert";ds.currentTmplNode = null;},getControlHTML : function(cn) {switch (cn) {case "template":return tinyMCE.getButtonHTML(cn, 'lang_template_desc', '{$pluginurl}/images/template.gif', 'mceTemplate', true);}return "";},execCommand : function(editor_id, element, command, user_interface, value) {var nodeArray, current, newTmpl, x, inst = tinyMCE.getInstanceById(editor_id), ds = inst.getData('template'), telm;switch (command) {case "mceTemplate":if (user_interface) {// called from toolbar button - show the popuptinyMCE.openWindow({file : '../../plugins/template/template.htm', // Relative to themewidth : tinyMCE.getParam('template_popup_width', 750),height : tinyMCE.getParam('template_popup_height', 600)}, {editor_id : editor_id, resizable : "yes", scrollbars : "no", pluginObj : TinyMCE_TemplatePlugin});} else {// internal command do the template stuff// get the returned HTML string from the pop-up and appened it to a DIV elementtelm = TinyMCE_TemplatePlugin._convertToNode(value.body);// Find template bodynodeArray = tinyMCE.selectElements(telm, 'div', function(n) {return tinyMCE.hasCSSClass(n, TinyMCE_TemplatePlugin.TMPL);});telm = nodeArray.length > 0 ? nodeArray[0] : null;nodeArray = [];if (ds.currentAction == "insert") {//insert new template after applying all the template content functions// Is it a template or snippetif (telm) {tinyMCE.execCommand('mceBeginUndoLevel');ds.currentAction = "insert-new";TinyMCE_TemplatePlugin._insertTemplate(editor_id, telm, value.title, value.tsrc, true);ds.currentAction == "insert";tinyMCE.execCommand('mceEndUndoLevel');tinyMCE.execInstanceCommand(editor_id, 'mceCleanup', false);} elsetinyMCE.execCommand('mceInsertContent', false, this._replaceValues(value.body));} else {// First collect the selected template in the editornodeArray = TinyMCE_TemplatePlugin._collectTemplateElements(ds.currentTmplNode);current = [];newTmpl = [];tinyMCE.getNodeTree(telm, newTmpl);for (x=0; x<nodeArray.length; x++)tinyMCE.getNodeTree(nodeArray[x], current);/*** inner function used in the loop below.* compares the supplied HTML element to the new template to:* - find a match with the new template and copy the element's content over* - find no match and indicate content will be lost*/var _test = function(elm) {var replaced = true;if (elm.className) {var names = elm.className.split(/\s+/), c, n;for (c = 0; c<names.length; c++) {if (names[c].match(/^mce/i))continue; // ignore all internal class namesfor (n=0; n<newTmpl.length; n++){replaced = false;if (newTmpl[n].className && newTmpl[n].className.match(new RegExp(names[c], "gi"))) {newTmpl[n].innerHTML = elm.innerHTML;//if(tinyMCE.getAttrib(elm,TinyMCE_TemplatePlugin.TMPL_DATE_SRC_ATTR,"") != "") {// tinyMCE.setAttrib(newTmpl[n], TinyMCE_TemplatePlugin.TMPL_DATE_SRC_ATTR, tinyMCE.getAttrib(elm,TinyMCE_TemplatePlugin.TMPL_DATE_SRC_ATTR));//}replaced = true;break;}}}}return replaced;};// comparison loop - first mis-match alerts user for confirmation.var cont = true;var asked = false;for (x = 0; x < current.length; x++) {if(!_test(current[x])) {cont = (asked || confirm("The new template has less elements than the currently selected content.\nIf you proceed you will loose content.\nAre you sure you want to proceed?", "Proceed?"));asked = true;if (!cont)break;}};// apply replacement if allowed toif (cont) {tinyMCE.execCommand('mceBeginUndoLevel');TinyMCE_TemplatePlugin._replaceTemplateContent(current[0], editor_id, telm, value.title, value.tsrc);tinyMCE.execCommand('mceEndUndoLevel');tinyMCE.execInstanceCommand(editor_id, 'mceCleanup', false);}}tinyMCE.triggerNodeChange(true);}return true;}return false;},handleNodeChange : function(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {var inst = tinyMCE.getInstanceById(editor_id), ds = inst.getData('template');if (tinyMCE.hasCSSClass(node, TinyMCE_TemplatePlugin.TMPL_ELEMENT) || tinyMCE.hasCSSClass(node.parentNode, TinyMCE_TemplatePlugin.TMPL_ELEMENT)) {tinyMCE.switchClass(editor_id + '_template', 'mceButtonSelected');ds.currentAction = "update";ds.currentTmplNode = node;return true;}ds.currentAction = "insert";ds.currentTmplNode = null;tinyMCE.switchClass(editor_id + '_template', 'mceButtonNormal');return false;},cleanup : function(type, content, inst) {var nodes = [];switch (type) {case "get_from_editor":// replace the opening wrapper div tag with a HTML commentcontent = content.replace(new RegExp('<div class="' + TinyMCE_TemplatePlugin.TMPL + '">', 'gi'),'<!-- ' + TinyMCE_TemplatePlugin.TMPL_BEGINS + ' -->');// delete any empty template wrapperscontent = content.replace(new RegExp('<div class="' + TinyMCE_TemplatePlugin.TMPL + '">(\s| | )?(<!-- ' + TinyMCE_TemplatePlugin.TMPL_ENDS + ' -->|\s)?</div>', 'gi'),'');// replace the closing wrapper tagcontent = content.replace(new RegExp('<!-- ' + TinyMCE_TemplatePlugin.TMPL_ENDS + ' --></div>', 'gi'),'<!-- ' + TinyMCE_TemplatePlugin.TMPL_ENDS + ' -->');break;case "insert_to_editor":// replace HTML comment with DIV wrappercontent = content.replace(new RegExp('<!-- ' + TinyMCE_TemplatePlugin.TMPL_BEGINS + ' -->', 'gi'),'<div class="' + TinyMCE_TemplatePlugin.TMPL + '">');content = content.replace(new RegExp('<!-- ' + TinyMCE_TemplatePlugin.TMPL_ENDS + ' -->', 'gi'),'<!-- ' + TinyMCE_TemplatePlugin.TMPL_ENDS + ' --></div>');break;case "get_from_editor_dom":// apply template content replacement functionsnodes = tinyMCE.selectNodes(content, function(n) {return tinyMCE.hasCSSClass(n, TinyMCE_TemplatePlugin.TMPL_ELEMENT);});TinyMCE_TemplatePlugin._applyFunctions(nodes, type);break;case "insert_to_editor_dom":// apply template content replacement functionsnodes = tinyMCE.selectNodes(content, function(n) {return tinyMCE.hasCSSClass(n, TinyMCE_TemplatePlugin.TMPL_ELEMENT);});TinyMCE_TemplatePlugin._applyFunctions(nodes, type);break;}return content;},// Private plugin internal methods/*** Creates a HTML DIV element and sets the innerHTML to equal the temlate innerHTML so that the template can be manipulated as DOM nodes.** @param {string} Template innerHTML* @return a HTML Element* @type HTMLElement*/_convertToNode : function(html) {var elm = document.createElement('div');elm.innerHTML = html;return elm;},/*** pass an array of template html elements and they will have the template class name added and any template functions applied** @param {array} template HTML elements* @return array of template HTML elements* @type array*/_prepareTemplateContent : function(elms) {var x, n, nodes = [];if (!elms)return {};if (!elms.length)elms = [elms];for (x = 0; x<elms.length; x++)tinyMCE.getNodeTree(elms[x], nodes, 1);for (n = 0; n<nodes.length; n++) {tinyMCE.addCSSClass(nodes[n], TinyMCE_TemplatePlugin.TMPL_ELEMENT);TinyMCE_TemplatePlugin._applyFunctions(nodes[n], TinyMCE_TemplatePlugin.TMPL_TEMPLATE_EVENT);}return elms;},_replaceValues : function(s) {var t = this, ds = tinyMCE.selectedInstance.getData('template');return s.replace(/\{\$([^\}]+)\}/g, function(a, b) {var it = ds.replace_items[b];if (it) {// Only supports text for nowif (typeof(it) != 'function')return it;}return b;});},/*** Applies any special functions to the template elements** @param {array} template HTML elements* @return array of template HTML elements* @type array*/_applyFunctions : function(elms, editor_event) {var x, elm, names, c, f;if (!elms)return {};if (!elms.length)elms = [elms];for(x = 0; x < elms.length; x++) {elm = elms[x];if (elm.className){names = elm.className.split(/\s+/);for (c = 0; c < names.length; c++){if (names[c] == TinyMCE_TemplatePlugin.TMPL_ELEMENT)continue;f = (TinyMCE_TemplatePlugin.functions[names[c]] ? TinyMCE_TemplatePlugin.functions[names[c]] : TinyMCE_TemplatePlugin.functions['blank']);f(elm, editor_event);}}}return elms;},/*** Given one node reference this function will collect all the nodes of the template to which it belongs.* It does this by finding the parent template wrapper DIV and returning all child nodes.** @param {HTMLElement} a HTMLElement which is part of a template* @return array of template HTML elements* @type array*/_collectTemplateElements : function(node) {var nodeArray = [], p;p = tinyMCE.getParentElement(node, 'DIV', function(n) {return tinyMCE.hasCSSClass(n, TinyMCE_TemplatePlugin.TMPL);});if (p)tinyMCE.getNodeTree(p, nodeArray);return nodeArray;},/*** Simply calls TinyMCE_TemplatePlugin._deleteTemplateContent and then TinyMCE_TemplatePlugin._insertTemplate** @param {HTMLElement} currently selected template node in editor* @param {string} id of editor instance* @param {HTMLElement} template contents as a HTMLElement (the parent DIV wrapper)* @param {string} title of template (unused as yet)* @param {string} source URI of the template file (unused as yet)* @return array of template HTML elements* @type array*/_replaceTemplateContent : function(currentNode, editor_id, newTemplate, title, tsrc) {TinyMCE_TemplatePlugin._deleteTemplateContent(currentNode);TinyMCE_TemplatePlugin._insertTemplate(editor_id, newTemplate, title, tsrc, false);},/*** Deletes a template from the editor content* Finds the parent DIV wrapper and deletes it and all children* @param {HTMLElement} currently selected template node in editor*/_deleteTemplateContent : function(node) {var p = tinyMCE.getParentElement(node, 'DIV', function(n) {return tinyMCE.hasCSSClass(n, TinyMCE_TemplatePlugin.TMPL);});if (p)p.parentNode.removeChild(p, true);},/*** Inserts a template into the specified editor** @param {string} id of editor instance* @param {HTMLElement} template contents as a HTMLElement (the parent DIV wrapper)* @param {string} title of template (unused as yet)* @param {string} source URI of the template file (unused as yet)*/_insertTemplate : function(editor_id, elm, title, tsrc, incComments) {var html;TinyMCE_TemplatePlugin._prepareTemplateContent(elm);html = '<div class="' + TinyMCE_TemplatePlugin.TMPL + '">';html += elm.innerHTML;html += '<!-- ' + TinyMCE_TemplatePlugin.TMPL_ENDS + ' --></div>';tinyMCE.execInstanceCommand(editor_id, 'mceInsertContent', false, html);},/*** template functions - functions for modifying template content*/functions : {blank : function(elm, editor_event) {},cdate : function(elm, editor_event) {var d, dsrc;if (editor_event != TinyMCE_TemplatePlugin.TMPL_TEMPLATE_EVENT)return;d = new Date();// find out if the creation date was previously storeddsrc = elm.innerHTML.match(new RegExp("<!-- " + TinyMCE_TemplatePlugin.TMPL_DATE_SRC_ATTR + ":(.*) -->", "gi"));if (dsrc)d = new Date(RegExp.$1);elm.innerHTML = TinyMCE_TemplatePlugin._getDateTime(d, tinyMCE.getParam("template_cdate_format", tinyMCE.getLang("lang_template_def_date_format")));//now we have to store the date value in a format easily read again, in case a future template change changes the date format...elm.innerHTML += "<!-- " + TinyMCE_TemplatePlugin.TMPL_DATE_SRC_ATTR + ":" + d.toUTCString() + " -->";},mdate : function(elm, editor_event) {var d = new Date();elm.innerHTML = TinyMCE_TemplatePlugin._getDateTime(d, tinyMCE.getParam("template_mdate_format", tinyMCE.getLang("lang_template_def_date_format")));},/*** This will insert the currently selected editor content into the template element.* It only does this if the template inserted is a new one and if the element does not have the special class.* The special class name prevents this from happening more than once.*/selectedContent : function(elm, editor_event) {var ds = tinyMCE.selectedInstance.getData('template');if (editor_event != TinyMCE_TemplatePlugin.TMPL_TEMPLATE_EVENT)return;if (ds.currentAction == "insert-new" && !tinyMCE.hasCSSClass(elm, TinyMCE_TemplatePlugin.TMPL_SEL_HTML_DONE)) {elm.innerHTML = tinyMCE.selectedInstance.selection.getSelectedHTML();tinyMCE.addCSSClass(elm, TinyMCE_TemplatePlugin.TMPL_SEL_HTML_DONE);}},/*** When the plugin is initialised this generates the functions that insert configured strings into template elements.*/generateReplacer : function(s) {return function(elm, editor_event) {elm.innerHTML = "" + s;};}},/*** formats a date according to the format string - straight from the 'insert date/time' plugin** @param {Date} date object* @param {string} format string* @return formatted date* @type string*/_getDateTime : function(d,fmt) {if (!fmt)return "";function addZeros(value, len) {var i;value = "" + value;if (value.length < len) {for (i=0; i<(len-value.length); i++)value = "0" + value;}return value;}fmt = fmt.replace("%D", "%m/%d/%y");fmt = fmt.replace("%r", "%I:%M:%S %p");fmt = fmt.replace("%Y", "" + d.getFullYear());fmt = fmt.replace("%y", "" + d.getYear());fmt = fmt.replace("%m", addZeros(d.getMonth()+1, 2));fmt = fmt.replace("%d", addZeros(d.getDate(), 2));fmt = fmt.replace("%H", "" + addZeros(d.getHours(), 2));fmt = fmt.replace("%M", "" + addZeros(d.getMinutes(), 2));fmt = fmt.replace("%S", "" + addZeros(d.getSeconds(), 2));fmt = fmt.replace("%I", "" + ((d.getHours() + 11) % 12 + 1));fmt = fmt.replace("%p", "" + (d.getHours() < 12 ? "AM" : "PM"));fmt = fmt.replace("%B", "" + tinyMCE.getLang("lang_template_months_long")[d.getMonth()]);fmt = fmt.replace("%b", "" + tinyMCE.getLang("lang_template_months_short")[d.getMonth()]);fmt = fmt.replace("%A", "" + tinyMCE.getLang("lang_template_day_long")[d.getDay()]);fmt = fmt.replace("%a", "" + tinyMCE.getLang("lang_template_day_short")[d.getDay()]);fmt = fmt.replace("%%", "%");return fmt;},TMPL_ELEMENT : 'mceTmplElm',TMPL : 'mceTmpl',TMPL_BEGINS : 'mceTmplBegins',TMPL_SEL_HTML_DONE : 'mceSelHTMLDone',TMPL_ENDS : 'mceTmplEnds',TMPL_DATE_SRC_ATTR : 'mcetmpldtesrc',TMPL_TEMPLATE_EVENT : 'prepare_template'};tinyMCE.addPlugin("template", TinyMCE_TemplatePlugin);