TinyMCE version 4 (EPiServer.CMS.TinyMce 2.0.0)

Antti Alasvuo

Vote:

Decided to test the new Tiny MCE v4 editor with Alloy.

Seems like it doesn't work as described https://world.episerver.com/documentation/developer-guides/CMS/add-ons/customizing-the-tinymce-editor-v2/

For example if you do as described in the above sample and try to add the "styleselect" by using config.Toolbar("styleselect") you overwrite the whole toolbar, so you need to actually get the default toolbar and then append to that or create a new toolbar.

// get existing toolbar(s)
var existingToolbar = defaultConfig["toolbar"] as string[];

// add a new toolbar row
List toolbar = new List(existingToolbar);
toolbar.Add("styleselect"); // actually adds a new toolbar row
defaultConfig.Toolbar(toolbar.ToArray());
// or you could add to the string[0] value: "| styleselect"

If you add content css (the web site css) as described in TinyMCE documentation

defaultConfig.ContentCss("/static/css/style.css");

Those styles are shown in the "styleselect", those shouldn't be put there.

If you try to add custom styles by using StyleFormats

defaultConfig.StyleFormats(
   new { title = "Demo", inline = "span", styles = new { color = "red" } }
);

That is not visible in the "styleselect" dropdown values but if looking at browser developer tools console "window.tinymce.settings;" you can see that the setting is there.

Am I doing something wrong or ... ?

#189454

Mar 19, 2018 22:38

Ben McKernan

Vote:

Hey, you are correct that setting the toolbar value will override the default value. This was deliberate since having methods that append or prepend a toolbar command is too naive. We will however add a public static string containing the default value that can be used similarly to how you have done in your code example. E.g.

config.Default()
    .Toolbar(defaultToolbar, "styleselect");

As for the styles being loaded automatically, this is caused by the importcss plugin which is enabled in the default config. I think we will release a new version that doesn't include this by default. You can do .AddSetting("importcss_append", true) in the meantime to get your style formats appended to the imported list.

See https://www.tinymce.com/docs/plugins/importcss/ for other settings to configure the importcss plugin.

#189502

Mar 20, 2018 13:23

Try our conversational search powered by Generative AI!

TinyMCE version 4 (EPiServer.CMS.TinyMce 2.0.0)