Click here to Skip to main content
Click here to Skip to main content
Technical Blog

TinyMCE Additional HTML Elements

, 25 Jul 2014 Public Domain
Rate this:
Please Sign up or sign in to vote.
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 */func

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.

License

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

Share

About the Author

I'm working on a new project called Crawler-Lib. It is a generalized back-end processing and hosting framework. Please take a look at it: Crawler-Lib Homepage
 
I have also a YouTube channel for this: Crawler-Lib YouTube Channel

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1411022.1 | Last Updated 25 Jul 2014
Article Copyright 2014 by Thomas Maierhofer (Tom)
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid