Configure TinyMCE editor in EPiServer CMS 11

TinyMCE is the default html editor for XhtmlString fields in EPiServer. Before EPiServer CMS 11, it was possible to add TinyMCE editor configurations by code or using the CMS editor interface, but from version 11 the configurations are only set by code. Today, I will show you how to configure a default and field specific TinyMCE configuration by code using the proper initialization module for this.

epi_server_logo_detail

First, we will create a block which will be used in the initialization module for the TinyMCE configurations. The block will represent an author of an article with an image, name, job position and a description field which is a XhtmlString field.


    [ContentType(GUID = "c1a7bff1-5951-abc2-ba6b-b55aca1f4a7b")]
    public class AuthorBlock : BlockData
    {
        [CultureSpecific]
        [UIHint(UIHint.MediaFile)]
        [AllowedTypes(typeof(MediaData))]
        [Required]
        [Display(GroupName = SystemTabNames.Content, Order = 100)]
        public virtual ContentReference Image { get; set; }

        [CultureSpecific]
        [Required]
        [Display(GroupName = SystemTabNames.Content, Order = 200)]
        public virtual string Name { get; set; }


        [CultureSpecific]
        [Display(GroupName = SystemTabNames.Content, Order = 300)]
        public virtual string JobPosition { get; set; }

        [CultureSpecific]
        [Display(GroupName = SystemTabNames.Content, Order = 400)]
        public virtual XhtmlString Description { get; set; }
    }

Then, we will create the initialization module for the TinyMCE configurations, the first configuration will be the default for all the XhtmlString fields and the second one will start from an empty configuration and add only the options we need to an specific field in the Author block. Pay special attention to the comments in the code.


    [ModuleDependency(typeof(TinyMceInitialization))]
    public class ExtendedTinyMceInitialization : IConfigurableModule
    {
        public void Initialize(InitializationEngine context)
        {
        }

        public void Uninitialize(InitializationEngine context)
        {
        }

        public void ConfigureContainer(ServiceConfigurationContext context)
        {
            context.Services.Configure(config =>
            {
                // Add the default settings.
                config.Default()
                    .AddEpiserverSupport()
                    .EnableImageTools()
                    .Menubar("file edit insert view format table tools help")
                    .AddPlugin("epi-link").AddPlugin("epi-image-editor").AddPlugin("epi-dnd-processor")
                    .AddPlugin("epi-personalized-content").AddPlugin("print").AddPlugin("preview").AddPlugin("searchreplace")
                    .AddPlugin("autolink").AddPlugin("directionality").AddPlugin("visualblocks").AddPlugin("visualchars")
                    .AddPlugin("fullscreen").AddPlugin("image").AddPlugin("link").AddPlugin("media").AddPlugin("template").AddPlugin("codesample").AddPlugin("table").AddPlugin("charmap")
                    .AddPlugin("hr").AddPlugin("pagebreak").AddPlugin("nonbreaking").AddPlugin("anchor").AddPlugin("toc").AddPlugin("insertdatetime").AddPlugin("advlist").AddPlugin("lists")
                    .AddPlugin("textcolor").AddPlugin("wordcount").AddPlugin("imagetools").AddPlugin("contextmenu").AddPlugin("colorpicker").AddPlugin("textpattern").AddPlugin("help")
                    .AddPlugin("code") // There are several plugins available, including paid ones
                    .Toolbar("formatselect | bold italic strikethrough forecolor backcolor " +
                        "| epi-link | alignleft aligncenter alignright alignjustify " +
                        "| numlist bullist outdent indent | removeformat | epi-image-editor | epi-personalized-content | cut copy paste | fullscreen",
                        "table | toc | codesample code") // Pipes represent separators in the editor UI
                    .BlockFormats("Paragraph=p;Header 2=h2;Header 3=h3; Header 4=h4;Header 5=h5");
                                
                // Passing a second argument to For will clone the given settings object
                // instead of the default one and extend it with some basic toolbar commands.
                // An example with a highly configured property using three rows in its toolbar
                config.For(p => p.Description, config.Empty()) // Choose the block, field and the base configuration
                    .AddPlugin("epi-link")
                    .Toolbar("formatselect | bold italic strikethrough forecolor backcolor " +
                        "| epi-link | alignleft aligncenter alignright alignjustify " +
                        "| numlist bullist outdent indent | removeformat | epi-personalized-content | cut copy paste");
            });
        }
    }

You can find more information about the properties that you can set in the EPiServer documentation and the TinyMCE documentation.

And that is all. You can add as many TinyMCE configurations as you want for every XhtmlString field in a page or block, if you do not define a configuration for a field, it will use the default one defined in the initialization module. I hope it will help someone and as always keep learning !!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s