I wanted to have buttons for the code
and var
HTML elements in the TinyMCE editor. The code
element was already there, but there was no predefined var
element. It is a nice Wednesday evening, so I decided to write a plug in for this. Here is the first shot of code:
function checkParentsContainingElement(parents, element)
{
for (i in parents) {
if (parents[i].nodeName == element)
return true;
}
return false;
}
(function () {
tinymce.create('tinymce.plugins.additional_formatsPlugin', {
init: function (editor, url) {
editor.on('init', function(args) {
console.log('Editor was clicked', args);
args.target.formatter.register('var', {
inline: 'var',
toggle: true,
});
});
editor.addCommand('mceCodeElement', function () { editor.formatter.toggle('code'); } );
editor.addCommand('mceVarElement', function () { editor.formatter.toggle('var'); });
editor.addButton('codeElement', {
title: 'Code',
cmd: 'mceCodeElement',
image: url + '/img/codeElement.png',
onPostRender: function() {
var ctrl = this;
editor.on('NodeChange', function(e) {
ctrl.active(checkParentsContainingElement(e.parents, 'CODE'));
});
}
});
editor.addButton('varElement', {
title: 'Var',
cmd: 'mceVarElement',
image: url + '/img/varElement.png',
onPostRender: function () {
var ctrl = this;
editor.on('NodeChange', function(e) {
ctrl.active(checkParentsContainingElement(e.parents, 'VAR'));
});
}
});
},
getInfo: function () {
return {
longname: 'Additional Formats plug in',
author: 'Thomas Maierhofer',
authorurl: '',
infourl: '',
version: tinymce.majorVersion + "." + tinymce.minorVersion
};
}
});
tinymce.PluginManager.add('additional_formats', tinymce.plugins.additional_formatsPlugin);
})();
The source code is LGPL. If someone needs the complete plug in, please write a message and I will provide a download link.