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:
You would just have to add an attribute to it's property - like this:
[CultureSpecific]
[Required(AllowEmptyStrings = false)]
[Display(
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: https://devblog.gosso.se/2018/09/customize-tinymce-at-runtime-in-episerver-11/
Enjoy, and leave a comment if you think this could be useful in a nuget package.
Recent posts