Join our community!

Get everything you need to start developing EPiServer solutions.
December 20 2012, 1:37

TinyMCE button plugin will not appear in the editor

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.

 


  • 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.

  • June 4 2013, 15:43
    Content is edited

    Hi

    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
  • 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.

  • 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:

    JS 

    (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);
    })();

        


    C#

    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

  • August 7 2013, 5:34

    Any word on this yet Linus.  I keep getting the error "TypeError: co is undefined".

  • August 14 2013, 16:38

    After setting this up again and getting some help from my collegue Duong an Nguyen we found out that the supplied parameters to the self executing methods are missing in the code samples above. So the last line should be changed to:

    })(tinymce, epiJQuery);

  • August 14 2013, 16:43

    Thanks Linus, i have got this finally working as well.  I do have to say there is a step that seems to be missing in the epsierver 7 documentation about clearing the .net temp files.  It was not showing up until i removed the temporary files from the .net framework.

    Thanks very much for getting back to me on this.