TinyMCE button plugin will not appear in the editor

December 20 2012, 1:37

I am trying to get an TinyMCE plugin to work. It's the "SyntaxHL" plugin -- the same plugin on this very website that provides a way for people to paste text into a pop-up window and have it show up as syntax-highlighted code.

I have download the plugin, and mapped a virtual path to it. I have confirmed that all files are available this URL:

/util/editor/tinymce/plugins/syntaxhl

I have added a class that looks like this:

    [TinyMCEPluginButton(
        PlugInName = "SyntaxHL",
        GroupName = "Misc",
        ButtonName = "syntaxhl",
        ButtonSortIndex = 10,
        IconUrl = "/util/editor/tinymce/plugins/syntaxhl/img/highlight.gif"
       )]
    public class TinyMCESyntaxHighlighterPlugin
    {
    }

When I go into the custom settings for TinyMCE, I see the button, and I can drag it up to the toolbar and save the settings. If I got back to the settings, it's right where it put it.

However, it will not show up in the editor when editing a page.

I look at the source of the page. In the "plugins" attribute in the TinyMCE JS, I do not see SyntaxHL, which is odd. But if I remove the "ButtonName" from the attribute in the code above, I do see the plugin. I have no explanation for this.

When I do that, it looks like this:

"plugins":"epiquote,paste,SyntaxHL,advimage, [lots more here...]

However, in the section where the buttons are:

"separator,bullist,numlist,outdent,indent,epiquote,separator,bold,italic,separator,link,unlink,styleselect,pastetext,"

It should be right after "pastetext" there, but it's not.

I looked at the Network tab in Chrome's developer tools -- the page is pulling the JS for the plugin. I can see the request, and I can see the JS come back. So TinyMCE knows about it, and is pulling it down from the server, it's just not displaying the button.

What I find weird is that it knows about the button when I go modify the settings for TinyMCE in admin mode. It's available to with the correct image and in the correct group, so EPiServer knows about it.

Additionally, I have no idea why the plugin only appears in the JS if I don't have the "ButtonName" property set on the TinyMCEPluginButton attribute. That just makes no sense to me. I would think it would be the opposite.

I'm completely out of answers here. I believe I am doing this correctly.

Linus Ekström
December 21 2012, 16:43
Hi!

I'm not sure if this will solve your issue but I tried to get this working for quite a long time on the latest code base that has an upgraded Tiny MCE version. What I found out is that the PlugInName and registered plugin in the client side file needs to match in casing (tinymce.create('tinymce.plugins.syntaxhl' on the client.

Dave Essery

June 4 2013, 15:43

Content is edited

I am having the exact same problem except with a plugin I am trying to develop myself. The button appears in the admin config section and I have added it to the toolbar, also I can see the JavaScript file being loaded on the page but my button does not appear. The plugin is very simple at the moment and all I am trying to do is output a 'Hello World', once the button is on ill develop the JS further. My class looks like this:

namespace EPiServer.Templates.ClientName.Plugins
{
    using EPiServer.Editor.TinyMCE;

     [TinyMCEPluginButton(
         PlugInName = "twocolumnwithbutton", 
         ButtonName = "twocolumn", 
        GroupName = "misc", 
        IconUrl = "Editor/tinymce/plugins/twocolumnwithbutton/twocolumn.gif")]
    public class TwoColumnTinyMceEditorButton
    {
    }
}

And my JS looks like this:

(function (tinymce, $) {
    tinymce.create('tinymce.plugins.twocolumnwithbutton', {
        init: function (ed, url) {

            // Register buttons
            ed.addButton('twocolumn', {
                title: 'Two Column Layout',
                image: url + 'util/Editor/tinymce/plugins/twocolumnwithbutton/twocolumn.gif',
                onclick: function () {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('Hello world!');
                }
            });
        },

        getInfo: function () {
            return {
                longname: 'Two Column Layout',
                author: 'xxxxxx',
                authorurl: 'http://xxxxxxx.com',
                infourl: 'http://xxxxxx.com',
                version: tinymce.majorVersion + "." + tinymce.minorVersion
            };
        }
    });

    // Register plugin
    tinymce.PluginManager.add('twocolumn', tinymce.plugins.twocolumnwithbutton);
})();

Could anyone give me any advice as to why this isnt working?

Many thanks

Dave

Linus Ekström
June 5 2013, 8:37
Content is edited

Try changing from "twocolumn" to "twocolumnwithbutton" when you register the plug-in on the client to match the pluginname defined in the server plug-in.

Dave Essery

June 6 2013, 13:48

Hi Linus

Thank you for quick response. I have updated the plugins to use 'twocolumnwithbutton' everywhere but the button is still not showing. I have added an alert at the top of the file to make sure that the file is being executed properly, and the alert is firing. So I added another just inside the init function, but that is not being called, so it is loading the JS but just not initialising it. Any thoughts?

My new code is below:

(function (tinymce, $) {
    alert('test');
    tinymce.create('tinymce.plugins.twocolumnwithbutton', {
        init: function (ed, url) {
            alert('test init');
            // Register buttons
            ed.addButton('twocolumnwithbutton', {
                title: 'Two Column Layout',
                image: url + 'util/Editor/tinymce/plugins/twocolumnwithbutton/twocolumn.gif',
                onclick: function () {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('Hello world!');
                }
            });
        },

        getInfo: function () {
            return {
                longname: 'Two Column Layout',
                author: 'xxxxx',
                authorurl: 'http://xxxxx.com',
                infourl: 'http://xxxxx.com',
                version: tinymce.majorVersion + "." + tinymce.minorVersion
            };
        }
    });

    // Register plugin
    tinymce.PluginManager.add('twocolumnwithbutton', tinymce.plugins.twocolumnwithbutton);
})();

namespace EPiServer.Templates.ClientName.Plugins
{
    using EPiServer.Editor.TinyMCE;

     [TinyMCEPluginButton(
         PlugInName = "twocolumnwithbutton",
         ButtonName = "twocolumnwithbutton", 
        GroupName = "misc", 
        IconUrl = "Editor/tinymce/plugins/twocolumnwithbutton/twocolumn.gif")]
    public class TwoColumnTinyMceEditorButton
    {
    }
}

Thank you very much