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