Attribute to set XHTML property settings in Episerver


A pretty normal task is to have an XHTML property that uses only a very specific subset of the normal TinyMCE functionality. For example a text field that also allows the editors to create links - but nothing else. I came up with what I think is an elegant solution here.

Often, you'll be in a situation where you have a string property on a content type, that needs a bit of additional functionality - but not the full XHTML editor. Obviously, today it is possible to modify the configuration of an XHTML field - but the classic approach calls for you to do it in a separate initialization script, defining a rule for properties on a given page to use something else than the standard configuration. That is useful when you are making a general rule - but in the cases where it's just a single property you want to adjust, I would much prefer to keep the configuration in an attribute on the same property.

So, in the case where you'd simply like a small editor that only allowed for text and links, like this:

screenshot of simple.PNG

You would just have to add an attribute to it's property - like this:

        [Required(AllowEmptyStrings = false)]
            GroupName = SystemTabNames.Content,
            Order = 2)]
        [XhtmlSettings(ToolBars =new string[] {"epi-link","","" }, Plugins =new string[] {"epi-link" }, Width =150, Height =150)]
        public virtual XhtmlString Text { get; set; }


What is really cool, is that it's actually extremely easy to add functionality like that into an attribute - As long as you make it IMetadataAware, you'll be able to change the metadata (including configuration) passed on to the UI for the property it attaches to.

Below is a gist of the attribute I wrote - it would be pretty easy to add additional configuration elements from the TinyMCE documentation.

Parts of this code is inspired by an alternate approach, described here by @lucgosso:

Enjoy, and leave a comment if you think this could be useful in a nuget package.

Post Comments()