• Publisert
  • 1 min

Setting editor stylesheets programmatically

Customising your TinyMCE styles for On Page Editing makes your editors' experience a tiny bit more pleasant. Here's how you set them in code, as opposed to via the admin GUI.

That way, you'll no longer depend on setting up things manually after changes are made,  and you have deployed a new version. Also - far more importantly - this enables you to give XhtmlString properties on your Commerce sites a new look. You know, since they currently can't be tweaked the way CMS content types can in admin mode.

Here's how. You need the following:

  • A stylesheet, obviously
  • An editor descriptor telling your TinyMCE to pick up that stylesheet
  • A UI hint to tie the editor and the descriptor together.

So, here's the descriptor:

Then apply it to your property - note the UIHint I've set here. It's what ties these things together.

Note that the file path I've set here starts with /. Just do this, and let it be root-relative. Not starting with / will just end up in it attempting to fetch from /EPiServer...., which will just make a mess for you.

Now, when rendering this with @Html.PropertyFor(x => x.SexyTextArea) you should have a nice, custom styled editor for your On Page Editing experience.