In this tutorial, you will learn how to customize the buttons that are rendered within the TinyMCE editor when using Episerver CMS. This guide will show you how to customize the TinyMCE toolbar on a per content area basis. This will allow you to cater for specific needs.
TinyMCE comes with a number of default properties, which you can see here. You can use get access to any of these button IDs within the CMS by using a static Episerver property, called TinyMCEButtons. TinyMCEButtons provides a wrapper around the different button names, so they can be referenced using strongly-typed qualifiers in your code. This is a much better approach compared to manually hardcoding string references throughout your codebase. The code creates a custom toolbar editor setting is shown below:
As you can see on Line50, you define a TinyMCESettings. In here, you add rows. Rows can be made up of the list of buttons you want to output. It really is that simple. To apply this custom toolbar setting onto a content area, you can decorate any XHtmlString property within a page/block definition like so:
These two files combined will allow you to customise the buttons as you see fit. Happy Coding 🤘
