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 plugin for this. Here is the first shot of code:
/* Additional Elements Plugin */ 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); // Register Formats args.target.formatter.register('var', { inline: 'var', toggle: true, }); }); // Register Commands editor.addCommand('mceCodeElement', function () { editor.formatter.toggle('code'); } ); editor.addCommand('mceVarElement', function () { editor.formatter.toggle('var'); }); // Register Buttons 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 Plugin', author: 'Thomas Maierhofer', authorurl: '', infourl: '', version: tinymce.majorVersion + "." + tinymce.minorVersion }; } }); // Register Plugin tinymce.PluginManager.add('additional_formats', tinymce.plugins.additional_formatsPlugin); })();
The sourcecode is LGPL, If someone needs the complete plugin, please write a message and I provide a download link.