I tried to add a menu for choosing different fonts in tinyMCE in episerver. It works for p-tags with the code below, but I would like to be able to choose font for all tags (p, h1, h2, etc).
var styleItemsFonts = new object[]
{
new { title = "Garant", selector = "p", styles = new { fontFamily = "Garant" } },
new { title = "Clarendon Cn", selector = "p", styles = new { fontFamily = "Clarendon Cn" } },
new { title = "Grand Hotel", selector = "p", styles = new { fontFamily = "Grand Hotel" } },
new { title = "Gotham Bold", selector = "p", styles = new { fontFamily = "Gotham Bold" } }
};
var styleFormats = ( new { title = "Font", items = styleItemsFonts });
config.Default()
.AddPlugin(plugins)
.Toolbar(toolbar1, toolbar2)
.AddSetting("paste_as_text", true)
.StyleFormats(styleFormats.Item1);
If I remove the 'selector = "p"' I get the following console error:
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at Object.isValidChild (tinymce.min.js:2)
at Object.isValid (tinymce.min.js:2)
at Array.u (tinymce.min.js:2)
at Rt (tinymce.min.js:2)
at tinymce.min.js:2
at Bv (tinymce.min.js:2)
at a (tinymce.min.js:2)
at Object.oy [as applyFormat] (tinymce.min.js:2)
at gy (tinymce.min.js:2)
at Object.toggle (tinymce.min.js:2)
Setting the selector to * should work. Like this:
new { title = "Garant", selector = "*", styles = new { fontFamily = "Garant" } }