Blog posts tagged with 'code'

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.