Add button to TinyMCE and keep configured buttons?

Kristoffer Lindén

Vote:

Hi!

We have built a TinyMce plugin that is installed via Nuget. We want to add an extra button to the toolbar but since it is a plugin we want to keep the configured buttons and just add our button last.

Everywhere I read it says that you must use Toolbar() to get the button to show.

public void ConfigureContainer(ServiceConfigurationContext context)
        {            
            
            context.Services.Configure(config =>
            {
                config.Default().AddExternalPlugin("myplugin", "/script/plugin.js")
                .Toolbar("myplugin");
            });
        }

Using this code will clear all buttons and just add mine. How do I keep all configured buttons and just add mine?

Thanks!

/Kristoffer

#197171

Sep 25, 2018 16:17

John McKillip

Vote:

Hi. Have you tried adding in the names of the others after the name of your plugin like so:

.Toolbar(
                    "myplugin epi-link unlink anchor image epi-image-editor epi-personalized-content | superscript subscript | charmap | searchreplace | cut copy paste pastetext",
                    "numlist bullist outdent indent | alignleft aligncenter alignright alignjustify | table | row_props cell_props row_after row_before delete_row col_after col_before delete_col split_cells merge_cells",
                    "fullscreen | bold italic | hr | styleselect | formatselect | undo redo removeformat | code  mceEPiProcessDropItem"
                );

#197176

Sep 25, 2018 16:41

Vote:

@Kristoffer, use: AppendToolbar("myplugin") if you just want to add a new button at the end of the default toolbar.

When you use the Toolbar(".....") method you are setting the whole toolbar to those buttons (so as you are only setting your custom buttom to the toolbar you are effectivily clearing all the default buttons).

#197183

Edited, Sep 25, 2018 20:27

Kristoffer Lindén

Vote:

Hmm, I cannot find any AppendToolbar()?

But I solved it this way:

context.Services.Configure<TinyMceConfiguration>(config =>
{
    var defaultToolbar = config.Default()["toolbar"] as string[];
    if (defaultToolbar != null && defaultToolbar.Length > 0)
    {
        var toolbar = defaultToolbar[0];
        toolbar += "| myplugin";
    }

    config.Default().AddExternalPlugin("myplugin", "/scripts/editor_plugin.js")
                .Toolbar(toolbar);
                 
});

Not the most clean way maybe but it works just fine. AppendToolbar() would of course be better. I'm using Episerver.CMS.TinyMCE 2.0, maybe AppendToolbar is included in later versions?

#197187

Sep 25, 2018 21:43

Kristoffer Lindén

Vote:

Upgrade to 2.3 then I found AppendToolbar(), thanks!

#197188

Sep 25, 2018 22:40

Vote:

Hi Kristoffer, sorry, I originally assumed that you were naturally using the latest version of Episerver TinyMCE 2.x version.

Any reason why you don't update to the latest version 2.6.3? You would get some bug fixes, see the fixes here.

#197192

Sep 26, 2018 5:37

Kristoffer Lindén

Vote:

Since it it a plugin that should be available for all versions on CMS 11 in this case we don't want to use 2.6.3 but we are already using 2.3 which requires 11.3 so I guess that requiring 11.4.6 ins not a big step, I will upgrade!

#197205

Sep 26, 2018 9:12

Nilanjan Saha

Vote:

Hello

I need a help to create custom mailto plugin in tinymce plugin.

Br,

Nilanjan Saha

#200292

Jan 08, 2019 16:17

Try our conversational search powered by Generative AI!

Add button to TinyMCE and keep configured buttons?