How to configure TinyMCE with additional toolbar and plugin options

  • Updated

From version 2.0 of Episerver's TinyMCE editor, the editor must be configured through code rather than through the UI. The default plugins and toolbar options are limited by design. The below steps show how these options can be expanded on an Alloy site.  


The following steps add to the toolbar and plugin options for all XHTML properties on an Alloy site. 

  1. In Visual Studio's Solution Explorer make a backup copy of ExtendedTinyMceInitialization.cs.
    Path:  Business\Initialization\ExtendedTinyMceInitialization.cs 
  2. Exclude the copy of this file from the project. 
  3. In the original ExtendedTinyMceInitialization.cs replace the ConfigureContainer method with the following.
    context.Services.Configure<TinyMceConfiguration>(config =>
    .Menubar("file edit insert view format table tools help")
    .AddPlugin("epi-link epi-image-editor epi-dnd-processor epi-personalized-content print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help code")
    .Toolbar("epi-link | epi-image-editor | epi-personalized-content | cut copy paste | fullscreen | code",
    "styleselect formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat",
    "table | toc | codesample");
  4. Build the project.
  5. Load the site and verify the editor has the additional options when editing an XHTML property like the Main Body property on the Standard Page type. It should look something like this. 

More on configuring the TinyMCE editor through code