TinyMCE version 4 (EPiServer.CMS.TinyMce 2.0.0)

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
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
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.