Customize #TinyMCE at runtime in Episerver 11

Need to customize the TinyMCE buttons at runtime and not at init? here is how.

Published 17th September 2018
Episerver 11
Episerver.Cms.TinyMce > 2.0

Old news for some, but pretty neat when you need to customize the tinyMCE instance depending on context or other logic.

In this example I restrict the use of buttons by role. So in this example the role “Bloggers” has one setup of buttons then other “normal” webeditors.

Solution with EditorDescriptor

An editor descriptor is an class that runs on server just before the property is rendered in browsers. It makes it possible to change the data “on the fly” just before it is showed.

Two steps:

  1. Register the class with EditorDescriptorRegistration
  2. Override ModifyMetadata with your logic

Find the settings:

All settings data are located in metadata.EditorConfiguration[“settings”]

Disable Menubar:

settings[“menubar”] = “false”;

Change the toolbars:

Just debug settings variable and you’ll find all the tinymce properties

The cs code (editordescriptor)

gist: https://gist.github.com/LucGosso/822b6e25d954c40117008c062ced7e67

Configure the editor on Init

The standard approach is to register your setup in an Episerver init module

Example of setup XhtmlString with a lot of goodies:

 

SEO-terms
  • Change properties in editor
  • Full example of TinyMceConfiguration
  • TinyMceConfiguration setup

About the author

Luc Gosso
– Independent Senior Web Developer
working with Azure and Episerver

Twitter: @LucGosso
LinkedIn: linkedin.com/in/luc-gosso/
Github: github.com/lucgosso

Like it? please up vote
2