November Happy Hour will be moved to Thursday December 5th.

Henrik Fransas
Nov 6, 2014
  5201
(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
Adding Geolocation Personalisation to Optimizely CMS with Cloudflare

Enhance your Optimizely CMS personalisation by integrating Cloudflare's geolocation headers. Learn how my Cloudflare Geo-location Criteria package...

Andy Blyth | Nov 26, 2024 | Syndicated blog

Optimizely SaaS CMS + Coveo Search Page

Short on time but need a listing feature with filters, pagination, and sorting? Create a fully functional Coveo-powered search page driven by data...

Damian Smutek | Nov 21, 2024 | Syndicated blog

Optimizely SaaS CMS DAM Picker (Interim)

Simplify your Optimizely SaaS CMS workflow with the Interim DAM Picker Chrome extension. Seamlessly integrate your DAM system, streamlining asset...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Optimizely CMS Roadmap

Explore Optimizely CMS's latest roadmap, packed with developer-focused updates. From SaaS speed to Visual Builder enhancements, developer tooling...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Set Default Culture in Optimizely CMS 12

Take control over culture-specific operations like date and time formatting.

Tomas Hensrud Gulla | Nov 15, 2024 | Syndicated blog

I'm running Optimizely CMS on .NET 9!

It works 🎉

Tomas Hensrud Gulla | Nov 12, 2024 | Syndicated blog