Hi Danny,
Do you already have a citation plugun that you want to integrate with EPiServer or you're wondering how to build one?
I guess you've already seen this page: http://world.episerver.com/Documentation/Items/Developers-Guide/EPiServer-CMS/75/Editing/Customizing-the-TinyMCE-editor/
Thanks Dejan,
I was hoping there may be an existing one out there.. But, yes writing out own will probably be the best option.
Thanks
I'm trying writing my own plugin.
Since Template plugin in standalone TinyMce editor is missing fråm the EPiServer version I copied the plugin from a downloaded copy from TinyMce homepage (version 3.8.X).
I have managed to implement a non visual plugin, which works fine.
A button plugin however, doesn't show up in editor mode. The button itself is visible then configuring the editor, e.g. drag-and-dropping the plugin button to the toolbar, but when in editor-mode the button does not show even tough it seems like it's correctly setup.
[TinyMCEPluginButton(PlugInName = "Template2", ButtonName = "templateBtn",
GroupName = "misc", LanguagePath = "/admin/tinymce/plugins/template/mybutton", IconClass = "mce_template", DefaultEnabled = true, EditorInitConfigurationOptions = "{ template_external_list_url : '/Util/Editor/tinymce/plugins/Template2/js/template_list.js'}")]
public class TemplateEditorPlugin
{
}
I've change the name of the plugin to avoid any conflicts with the built-in plugin.
Here's the code for the plugin
/**
* editor_plugin_src.js
*
* Copyright 2009, Moxiecode Systems AB
* Released under LGPL License.
*
* License: http://tinymce.moxiecode.com/license
* Contributing: http://tinymce.moxiecode.com/contributing
*/
(function() {
var each = tinymce.each;
tinymce.create('tinymce.plugins.TemplatePlugin2', {
init : function(ed, url) {
var t = this;
t.editor = ed;
// Register commands
ed.addCommand('mceTemplate', function(ui) {
ed.windowManager.open({
file : url + '/template.htm',
width : ed.getParam('template_popup_width', 750),
height : ed.getParam('template_popup_height', 600),
inline : 1
}, {
plugin_url : url
});
});
ed.addCommand('mceInsertTemplate', t._insertTemplate, t);
// Register buttons
ed.addButton('templateBtn', { title: 'template.desc', cmd: 'mceTemplate' });
ed.onPreProcess.add(function(ed, o) {
var dom = ed.dom;
each(dom.select('div', o.node), function(e) {
if (dom.hasClass(e, 'mceTmpl')) {
each(dom.select('*', e), function(e) {
if (dom.hasClass(e, ed.getParam('template_mdate_classes', 'mdate').replace(/\s+/g, '|')))
e.innerHTML = t._getDateTime(new Date(), ed.getParam("template_mdate_format", ed.getLang("template.mdate_format")));
});
t._replaceVals(e);
}
});
});
},
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
};
},
_insertTemplate : function(ui, v) {
var t = this, ed = t.editor, h, el, dom = ed.dom, sel = ed.selection.getContent();
h = v.content;
each(t.editor.getParam('template_replace_values'), function(v, k) {
if (typeof(v) != 'function')
h = h.replace(new RegExp('\\{\\$' + k + '\\}', 'g'), v);
});
el = dom.create('div', null, h);
// Find template element within div
n = dom.select('.mceTmpl', el);
if (n && n.length > 0) {
el = dom.create('div', null);
el.appendChild(n[0].cloneNode(true));
}
function hasClass(n, c) {
return new RegExp('\\b' + c + '\\b', 'g').test(n.className);
};
each(dom.select('*', el), function(n) {
// Replace cdate
if (hasClass(n, ed.getParam('template_cdate_classes', 'cdate').replace(/\s+/g, '|')))
n.innerHTML = t._getDateTime(new Date(), ed.getParam("template_cdate_format", ed.getLang("template.cdate_format")));
// Replace mdate
if (hasClass(n, ed.getParam('template_mdate_classes', 'mdate').replace(/\s+/g, '|')))
n.innerHTML = t._getDateTime(new Date(), ed.getParam("template_mdate_format", ed.getLang("template.mdate_format")));
// Replace selection
if (hasClass(n, ed.getParam('template_selected_content_classes', 'selcontent').replace(/\s+/g, '|')))
n.innerHTML = sel;
});
t._replaceVals(el);
ed.execCommand('mceInsertContent', false, el.innerHTML);
ed.addVisual();
},
_replaceVals : function(e) {
var dom = this.editor.dom, vl = this.editor.getParam('template_replace_values');
each(dom.select('*', e), function(e) {
each(vl, function(v, k) {
if (dom.hasClass(e, k)) {
if (typeof(vl[k]) == 'function')
vl[k](e);
}
});
});
},
_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", "" + this.editor.getLang("template_months_long").split(',')[d.getMonth()]);
fmt = fmt.replace("%b", "" + this.editor.getLang("template_months_short").split(',')[d.getMonth()]);
fmt = fmt.replace("%A", "" + this.editor.getLang("template_day_long").split(',')[d.getDay()]);
fmt = fmt.replace("%a", "" + this.editor.getLang("template_day_short").split(',')[d.getDay()]);
fmt = fmt.replace("%%", "%");
return fmt;
}
});
// Register plugin
tinymce.PluginManager.add('Template2', tinymce.plugins.TemplatePlugin2);
})();
The js-file is loaded into the DOM and I can debug in the editors js-code.
No 404-errors.
Ideas anyone?
Does anyone know if a Citation plugin for the TinyMCE editor.
Text from our user requirment:
"She highlights the sentence that needs citing and right clicks then selects citation from the drop down list. The CMS then automatically tags the sentence with the superscript 1 and asks her for the citation text which she can then add in by highlighting the text at the bottom of her article or by pasting it into a pop up box."