Click here to Skip to main content
13,258,878 members (46,067 online)
Click here to Skip to main content
Add your own
alternative version


2 bookmarked
Posted 25 Jul 2014

TinyMCE Additional HTML Elements

Rate this:
Please Sign up or sign in to vote.
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:

/* 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
      '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) {
              , 'CODE'));

            editor.addButton('varElement', {
                title: 'Var',
                cmd: 'mceVarElement',
                image: url + '/img/varElement.png',
                onPostRender: function () {
                    var ctrl = this;
                    editor.on('NodeChange', function(e) {
              , '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.


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


About the Author

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

You may also be interested in...

Comments and Discussions

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