Torjus Eidet
Apr 8, 2014
(4 votes)

Strongly typed TinyMCE settings

One of the things that bugs me when migrating between environments is to set up the TinyMCE settings. Wouldn’t it be great if we could just define it in code, like we do with our content types? It’s actually not that hard to accomplish.

With this solution, all you have to do is to decorate you XHtmlString properties with an attribute, TinyMceSettings.

   public class ExamplePage : PageData
       [Display(Name = "Main body")]
       public virtual XhtmlString MainBody { get; set; }

This attribute takes the type of a settings class as it parameter.

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
   public class TinyMceSettingsAttribute : Attribute
       public TinyMceSettingsAttribute(Type settingsType)
           SettingsType = settingsType;
       public Type SettingsType { get; set; }

A settings class looks like this:

   public class StandardTinyMceSettings : ITinyMceSettings
       public StandardTinyMceSettings()
           DisplayName = "Some TinyMce Settings";
           Id = new Guid("2235405F-A998-4371-81AE-F45F8899A03A");
           ContentCss = null;
           Toolbars = new []
               new []
                   "bold", "italic", "underline", "strikethrough", "separator",
                   "justifyleft", "justifycenter", "justifyright", "separator",
                   "epilink", "unlink"
           NonVisualPlugins = null;
       public string DisplayName { get; set; }
       public Guid Id { get; set; }
       public string ContentCss { get; set; }
       public string[][] Toolbars { get; set; }
       public string[] NonVisualPlugins { get; set; }

As you can see, you can define toolbars, display name, non visual plugins, editor css file path and so on. In order for this solution to work, you will need to implement the interface ITinyMceSettings:

   public interface ITinyMceSettings
       string DisplayName { get; set; }
       Guid Id { get; set; }
       string ContentCss { get; set; }
       string[][] Toolbars { get; set; }
       string[] NonVisualPlugins { get; set; }

In order to hook things up you will need to include the following initializable module:

    public class TinyMceSettingsInitialization : IInitializableModule
        private bool _initialized;
        IPropertySettingsRepository _propertySettingsRepository;
        IContentTypeRepository _contentTypeRepository;
        IPropertyDefinitionRepository _propertyDefinitionRepository;
        public void Initialize(InitializationEngine context)
            if (_initialized) return;
            _propertySettingsRepository = ServiceLocator.Current.GetInstance<IPropertySettingsRepository>();
            _contentTypeRepository = ServiceLocator.Current.GetInstance<IContentTypeRepository>();
            _propertyDefinitionRepository = ServiceLocator.Current.GetInstance<IPropertyDefinitionRepository>();
            var allContentTypes = _contentTypeRepository.List();
            foreach (var contentType in allContentTypes)
                if (contentType == null || contentType.ModelType == null)
                var properties = contentType.ModelType.GetProperties();
                foreach (var propertyInfo in properties)
                    if (propertyInfo.PropertyType != typeof (XhtmlString))
                    var settings = GetSettingsFromAttrubte(propertyInfo);
                    if (settings == null)
                    var property = contentType.PropertyDefinitions.First(x => x.Name == propertyInfo.Name);
                    SaveSettingsToProperty(property, settings);
            _initialized = true;
        public ITinyMceSettings GetSettingsFromAttrubte(PropertyInfo propertyInfo)
            var settingsAttribute = (TinyMceSettingsAttribute)Attribute.GetCustomAttribute(propertyInfo, typeof(TinyMceSettingsAttribute));
            if (settingsAttribute == null) return null;
            var settingsType = settingsAttribute.SettingsType;
            var settings = Activator.CreateInstance(settingsType) as ITinyMceSettings;
            if (settings == null) throw new Exception("Defined TinyMceSettings type is not implementing ITinyMceSettings");
            return settings;
        public void CreateOrUpdateSettingsContainer(ITinyMceSettings settings)
            PropertySettingsContainer container;
            _propertySettingsRepository.TryGetContainer(settings.Id, out container);
            container = container ?? new PropertySettingsContainer(settings.Id);
            var wrapper = container.GetSetting(typeof(TinyMCESettings));
            wrapper = wrapper ?? new PropertySettingsWrapper();
            var propertySettings = new TinyMCESettings();
            foreach (var toolbarRow in settings.Toolbars)
                propertySettings.ToolbarRows.Add(new ToolbarRow(toolbarRow));
            propertySettings.NonVisualPlugins = settings.NonVisualPlugins ?? new string[] { };
            propertySettings.ContentCss = settings.ContentCss ?? string.Empty;
            wrapper.PropertySettings = propertySettings;
            wrapper.IsGlobal = true;
            wrapper.IsDefault = false;
            wrapper.DisplayName = settings.DisplayName;
        private void SaveSettingsToProperty(PropertyDefinition property, ITinyMceSettings settings)
            var writableProperty = property.CreateWritableClone();
            writableProperty.SettingsID = settings.Id;
        public void Uninitialize(InitializationEngine context) { }
        public void Preload(string[] parameters)  { }

This is just my first thoughts around such a system. This might not be the best way to solve this, so if you have any suggestions please feel free to share them with me. My plans are to turn this into a nuget package, but I’m hoping for some feedback first.


Apr 08, 2014


Martin Pickering
Martin Pickering Apr 8, 2014 11:46 PM

what a stupendous idea.
if you are truly frustrated by migrating between environments why would you not have a standard set of settings that apply by default to all xhtmlstrings instead of forcing you to apply the "default" via an attribute class. you could still retain the attribute class to be able to request specific settings for a particular property. perhaps also another attribute class to request standard episerver behaviour (to reverse the new default behaviour created by the custom code).

Apr 9, 2014 08:13 AM

Hi Torjus!

Nice to see someone try doing a generic solution to this finally. As a conscience, I did a prototype for another solution for this last week that I'll show for the EPiServer development team today. So there is a chance that there might be a built in solution for this in the core in the near future.

May 15, 2014 02:14 PM

Linus, do you have any news if/when this will be included in the core product?

Best regards

Keith Lawrence
Keith Lawrence Aug 2, 2017 04:29 PM

We've implemented this code as described above and noticed that it increases our projects startup time by a huge 50 seconds as reported by /episerver/Shell/Debug/ShowTimeMeters

Project.Web TinyMceSettingsInitialization Initialize 48340

Does anyone have any ideas on how to streamline this approach?

Please login to comment.
Latest blogs
Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog

New Optimizely certifications - register for beta testing before November 1st

In January 2023, Optimizely is making updates to the current versions of our certification exams to make sure that each exam covers the necessary...

Jamilia Buzurukova | Sep 28, 2022

Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog

Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog

The Report Center is finally back in Optimizely CMS 12

With Episerver.CMS.UI 12.12.0 the Report Center is finally re-introduced in the core product.

Tomas Hensrud Gulla | Sep 26, 2022 | Syndicated blog

Dynamic Route in ASP.NET Core When MapDynamicControllerRoute Does Not Work

Background Creating one of the add-on for Optimizely I had to deal with challenge to register dynamically route for the API controller. Dynamic rou...

valdis | Sep 25, 2022 | Syndicated blog