Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML5

TinyMCE Additional HTML Elements

5.00/5 (3 votes)
25 Jul 2014Public Domain 8.1K  
TinyMCE additional HTML elements

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:

JavaScript
/* Additional Elements plug in */

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 plug in',
                author: 'Thomas Maierhofer',
                authorurl: '',
                infourl: '',
                version: tinymce.majorVersion + "." + tinymce.minorVersion
            };
        }
    });

    // Register plug in
    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.

License

This article, along with any associated source code and files, is licensed under A Public Domain dedication