image

Extend TinyMCE in Optimizely CMS 12

image By - Ravindra Rathore
27 March 2023
 

Since technologies are upgraded to newer versions the ways to extend or override the out-of-the-box functionality are also changed a little bit so today I am going to write a small blog article to extend the TinyMCE/RTE

Step 1-

Create a class called "TinyMCEServiceCollectionExtensions.cs". You can name it anything.

 public static class TinyMCEServiceCollectionExtensions
    {
        public static IServiceCollection ConfigureTinyMCE(this IServiceCollection services)
        {
            services.Configure(o =>
            {
                o.Default()
                    .AddPlugin("media hr code table textcolor")
                    .Toolbar("formatselect styleselect | bold italic underline | epi-link anchor image epi-image-editor epi-personalized-content | bullist numlist outdent indent | searchreplace fullscreen | help")
                    .AppendToolbar("media code hr table")
                    .AddSetting("image_caption", true)
                .AddSetting("image_advtab", true)
                .ContentCss("/css/editor.css")
                .AddSetting("image_class_list", new[]{
                    new { title = "None", value = ""},
                    new { title = "Image Right", value = "article-image right"},
                    new { title = "Image Full", value = "article-image full"}
                    });
            
            });

            return services;
        }
    }

Step 2

Call this class method "ConfigureTinyMCE" in Startup.cs class.

 public void ConfigureServices(IServiceCollection services)
    {
        ///disable not needed
        //services.TryAddEnumerable(ServiceDescriptor.Singleton(typeof(IFirstRequestInitializer), typeof(AddPagesInitializer)));

        if (_webHostingEnvironment.IsDevelopment())
        {
            AppDomain.CurrentDomain.SetData("DataDirectory", Path.Combine(_webHostingEnvironment.ContentRootPath, "App_Data"));

            services.Configure(options => options.Enabled = false);
        }

        services
            .AddCmsAspNetIdentity()
            .AddCms()
            .AddAdminUserRegistration()
            .ConfigureTinyMCE()
            .AddTinyMceCustomizations()
            .AddEmbeddedLocalization();

        if (!_webHostingEnvironment.IsDevelopment())
        {
            services.AddCmsCloudPlatformSupport(Configuration);
        }

       

    }

Thanks for reading this blog post I hope it helps

Thanks and regards

Ravindra S. Rathore