Henrik Fransas
Nov 6, 2014
  5935
(0 votes)

How to use TinyMce in a custom property the EPiServer Way–Clean Version

Thanks to feedback from Erik Kärrsgård at EPiServer I learned that I did not need to rewrite all of the code EPiServer has done, it is possible to just extend it. This is great news since it makes it more possible to work even in the future when EPiServer has done some changes to their code.

If you look at the code in my previous post (http://world.episerver.com/Blogs/Henrik-Fransas/Dates/2014/10/how-to-use-tinymce-the-episerver-way-in-a-custom-property/) you can see how the property is build up and the amount of code that I needed to copy. Now the editor descriptor looks like this:

using EPiServer; using EPiServer.Cms.Shell.Extensions; using EPiServer.Core; using EPiServer.ServiceLocation; using EPiServer.Shell.ObjectEditing; using EPiServer.Shell.ObjectEditing.EditorDescriptors; using System; using System.Collections.Generic; namespace TinyMceInCustomProperties.Business.EditorDescriptors { [EditorDescriptorRegistration(TargetType = typeof(XhtmlString), EditorDescriptorBehavior = EditorDescriptorBehavior.ExtendBase, UIHint = Global.SiteUIHints.ExtendedXhtml)] public class ExtendedXhtmlEditorDescriptor : EditorDescriptor { public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes) { base.ModifyMetadata(metadata, attributes); ExtendedMetadata extendedMetadatum = metadata.FindTopMostContentMetadata(); IContent model; if (extendedMetadatum != null) { model = extendedMetadatum.Model as IContent; } else { model = null; } metadata.ClientEditingClass = "alloy/editors/ExtendedTinyMCEEditor"; metadata.EditorConfiguration.Add("parentValue", ParentValue(model, metadata.PropertyName)); } private string ParentValue(IContent page, string propertyName) { if (page.ParentLink != null) { var repro = ServiceLocator.Current.GetInstance<IContentRepository>(); IContent parent; if (repro.TryGet(page.ParentLink, out parent)) { return ((ContentData)parent).GetPropertyValue(propertyName) ?? string.Empty; } } return string.Empty; } } }

The key thing in this is that I decorate the class with this: EditorDescriptorBehavior = EditorDescriptorBehavior.ExtendBase. This tells EPiServer to use the descriptor for XhtmlString and extend it.

The dojo/javascript files also is a lot smaller with not much duplications of code, the only places is the functions where I need to insert my code. It now looks like this:

define([ // dojo "dojo/_base/declare", // epi "epi-cms/contentediting/editors/TinyMCEEditor", // templates "dojo/text!./templates/ExtendedTinyMCEEditor.html" ], function ( //dojo declare, // epi TinyMCEEditor, // templates template ) { return declare([TinyMCEEditor], { // summary: // Widget for the tinyMCE editor. templateString: template, postCreate: function () { this.inherited(arguments); this.connect(this.inheritButton, "onclick", "onInheritButtonClick"); this.connect(this.inheritFromParentRadioButton, "onclick", "onInheritRadioButtonClick"); this.connect(this.useLocalValueRadioButton, "onclick", "onInheritRadioButtonClick"); this.divParentValue.innerHTML = this._unencodedValue(this.parentValue); }, onInheritButtonClick: function () { var text = this.divParentValue.innerHTML; var ed = this.getEditor(); if (ed && ed.initialized) { ed.setContent(text); } else { this.editorFrame.value = text; } this._onChange(text); }, onInheritRadioButtonClick: function () { var ed = this.getEditor(); if (ed && ed.initialized) { this._onChange(ed.getContent(), true); } }, _setValueAttr: function (newValue) { //summary: // Value's setter // // tags: // protected var ed = this.getEditor(), editableValue = newValue || ""; var isInheritting = editableValue.charAt(0) == "1", editableValue = this._unencodedValue(newValue || ""); if (isInheritting) { this.inheritFromParentRadioButton.checked = true; this.useLocalValueRadioButton.checked = false; } else { this.useLocalValueRadioButton.checked = true; this.inheritFromParentRadioButton.checked = false; } this.inherited(arguments, [editableValue]); }, _onChange: function (val, forcechange) { // summary: // Raised when the editor's content is changed. // // val: // The editor's changed value // // tags: // callback public forcechange = !!forcechange; var hasChanged = this.get("_editorValue") !== val || forcechange === true; if (hasChanged) { this.set("_editorValue", val); val = this._encodedValue(val); this._set("value", val); if (this.validate()) { this.set("_hasPendingChanges", false); this.onChange(val); } } }, _encodedValue: function (orgValue) { var useLocal = this.useLocalValueRadioButton.checked; return (useLocal ? "0:" : "1:") + orgValue; }, _unencodedValue: function (orgValue) { var isSet = orgValue != null && orgValue !== undefined && orgValue.length >= 2 && orgValue.charAt(1) == ":"; return isSet ? orgValue.substring(2) : orgValue; } }); });

The html-template looks the same so look at the previous post to see how it looks like.

The code on github is updated so just clone it at try it out.

The next step is to make this also available in the OnPageEdit mode.

The source code for this you can find here: https://github.com/hesta96/TinyMceInCustomProperties

Thanks again to Erik for his update on the code!

Happy coding!

Nov 06, 2014

Comments

Please login to comment.
Latest blogs
Optimizely CMS 13: Why Search & Navigation Now Means Graph Migration

Optimizely CMS 13 makes Graph a required part of the platform. Here is what that means in practice for teams moving from Search & Navigation, with ...

Wojciech Seweryn | Apr 8, 2026 |

Jhoose Security Module V3.0.0 – Site-Level Security Configuration for Optimizely

Jhoose Security Module updated for Optimizely CMS 13, introducing separate packages for CMS 12 and 13 with ongoing support and enhancements.

Andrew Markham | Apr 6, 2026 |

Searchable settings page

In my current project which has been actively developed for quite some time we have a big classic settings page. Unfortunately the placement and...

Per Nergård (MVP) | Apr 6, 2026

Using Azure Devops Pipelines in Optimizely SAAS (Configured) Commerce

Introduction When working with SAAS Commerce build service v2 your currently need to use a github repo with configured branches to start deployment...

Mark Hall | Apr 4, 2026 |