Skip to main content

Customising Sitecore's Rich Text Editor. R u Kidding me?

theProblem:
The front end ( html and css ) is set up such a way that for the description text form a sitecore content needs to have a <p> tag wrapped around it. 
Now, I'm sure just by reading the above 2 lines you are thinking "WOW that's really simple and every RTE does that by default. So, continuing to reading this is useless and this guy is clearly dumb enough."

"sayth whath" - said thor
Well Yes and No.
This is what I found:
So by default the RTE wraps texts in a <p> tag = TRUE. BUT the catch is you will need to hit a enter or copy paste multiple paragraph. Then the RTE will clean the HTML and in the process it will wrap each para in a <p> tag. NICE. Of course there's a setting for it that you can modify and instead of <p> you can have <br/> and so.
<setting name="HtmlEditor.LineBreak" value="p" />
And no you can't have anything that you want there.. there's a limited list of tags that you can put in the settings.
Either way that VERY COOL OF YOU, SITECORE.
But this doesn't solve my problem. Cause I want ( or the client wants or the requirement is) to add a <p> tag regardless of hitting the enter button.
So when someone types in one line in there and hit the "accept" button the text will be wrapped in a <p> tag.
This has been stuck in the head and I had dreams about it.
theResearch:
This is where I start cursing sitecore because of it's lack of documentation and particularly how the RTE is baked into it.
Basically SITECORE uses RADEditor from Telerik ( which is 'probably' not TinyMCE )  as its RTE. In terms of how rad editor is made is flexible enough to customise its behaviour according to the needs BUT the way sitecore has included it makes it somewhat not so much customisable.
AND OFCOURSE THERE IS NO OR VERY LESS DOCUMENTATION ABOUT IT.
I eventually ended up seeing it internal code from Sitecore.client.dll and figure out how they're incorporating the RadEditor.
What I Tried:
"sitecore\shell\Controls\Rich Text Editor\EditorWindow.aspx" is the file that displays the UI of the editor. And one of the JS functions in there is my injection point for my custom snippet to add <p> tag.
BUT obviously I cannot change this file because it won't be in the sourcecontrol and as part of standard practice I should not modify SITECORE's core file as it will lead to inconsistency in different environment and will become difficult to manage (should the need arises to re-install sitecore).
Also, because how RadEditor is baked into SITECORE I could not implement my own custom EditorFilter because according to the RadEditor documentation that would require modifying its declaration in <telerik:RadEditor ID="Editor" Runat="server"> which also is in EditorWindow.aspx. So there goes my golden egg. :( ( I did say F*** Y** SITECORE at this point, ofcourse)
theSolution:
Fortunately, From the dll, one particular function caught my eye: 
protected virtual void SetupScripts()
{
foreach (XmlNode node in Factory.GetConfigNodes("clientscripts/htmleditor/script"))
this.Result.Scripts.AppendFormat("<script src=\"{0}\" language=\"{1}\"></script>\n", (object) XmlUtil.GetAttribute("src", node), (object) XmlUtil.GetAttribute("language", node));
}
NICE, eh ? The developers of SITECORE are clever after all.
So I did this in the webconfig,
<!-- CLIENT SCRIPTS
These script files are included in the client, e.g. '<script src="/myscript.js" language="JavaScript"/>'
-->
<clientscripts>
<everypage />
<htmleditor>
<script src="/assets/js/CustomRTE.js" language="javascript"/>
</htmleditor>
</clientscripts>

And overrode "scSendRequest" function from EditorWindow.aspx.
window.scSendRequest = function(evt, command){
var editor = scRichText.getEditor();
if (editor.get_mode() == 2){//If in HTML edit mode
editor.set_mode(1); //Set mode to Design
}
var htmls = editor.get_html(true);
var regex = /<p[^>]*>.*?<\/p>/i;
var match = regex.exec(htmls);
if(match == null && htmls != null) {
htmls = "<p>" + htmls + "</p>";
}
//$("EditorValue").value = editor.get_html(true);
$("EditorValue").value = htmls;
scForm.browser.clearEvent(evt);

scForm.postRequest("", "", "", command);
return false;
}

AND YAY .. double rainbow and unicorn.

Obviously the JS stuffs didn't come out my head right away. I must confess the struggle.
So with this approach nothing from SITECORE's core has been modified and all the custom code sits out side of sitecore shell making them source controllable too and achieve's what I wanted.

The important thing I learned here is overriding a JS function. Didn't even know that was possible. Weird.
However the question remains, where the F*** is the documentation ?

theEnd:
There might be more straight forward and better way of doing it ( for which what I have done is dumb enough ) .. but until then this will do. 
Either way, this opens few other doors for customising Sitecore's RTE. ( if it helps anyone )

Thank you for reading a lot of texts.

Comments

Popular posts from this blog

Do you even Kubernetes ? - in private cloud

Kubernetes (“koo-burr-NET-eez”) /κυβερνήτης/ - Can be used as noun or verb. Noun "helmsman" or "pilot" or "Orchestrator". We use Kubernetes to achieve resiliency for our application. Verb Perform the act of doing Kubernetes. When done using TKG it is easy but can be super hard if the right tool is not used. Do you even Kubernetes? If I were to survey about how many people in IT industry (regardless of role) knows or at least heard about Kubernetes I would be very surprised if the percentage came out any less than at least 80%. I am curious though, How many people have actually deployed on Kubernetes? How many people have created a Kubernetes cluster? How? The answer could go either way of "Yeah, it's easy" OR "Dude!! it's hard". This is because, in my opinion, it all depends on choosing the right toolset that are fit for purpose. In this post I will create a Kubernetes cluster and deploy a microservice application End-To-End, th...

Deciphering the hype of Service Mesh

Service Mesh is not a new topic anymore. Most of us in the industry are already familiar with it. There are also tons of article in the internet about its why and how. In my opinion, it has a significant influence on the application architecture. Here's a DevSecOps humor to start the discussion (and it will make sense as you read along).  This is part 1 of my 3 parts blog posts on Service Mesh. Part 1:   Deciphering the hype of Service Mesh Part 2:   Understanding The Ingress and The Mesh components of Service Mesh. Part 3:  Understanding the observability component of Service Mesh (TBD).  In this post, I am going approach Service Mesh from an application architecture point of view. I will also score some of its basic features on a scale of 1 to 5, where 1 being the least important to me and 5 being the most important.  Table of contents: Common Q&As Features mTLS Service Discovery Meshing Ingress, Gateways etc Telemetries Enterprise products and offeri...

Openshift-Powered Homelab | Why, What, How

I wanted to build a Homelab for some time but it was taking a backseat as I always had access to cloud environments (eg: cloud accounts, VMware DC etc) and the use cases I was focusing on didn't really warrant for one. But lately, some new developments and opportunities in the industry triggered the need to explore use cases in a bare-metal server environment, ultimately leading to the built of my own homelab, called MetalSNO. In this post, I will discuss some of my key reasons for building a homelab, the goals I set for it, and the process I followed to building one from scratch. I'll conclude with some reflections on whether it was truly worth it and what I plan to do with it going forward. Compelling reasons (The Why ) My uses cases for a homelab weren't about hosting plex server, home automation etc (I have them on Raspberry PIs for some years now). My Homelab is really about exploring technologies and concepts that are on par with industry trend. Below are some of the ...

The story of a Hack Job

"So, you have hacked it" -- Few days ago one of the guys at work passed me this comment on a random discussion about something I built. I paused for a moment and pondered: Do I reply defending how that's not a hack. OR Do I just not bother I picked the second option for 2 reasons: It was late. It probably isn't worth defending the "hack vs" topic as the comment passed was out of context. So I chose the next best action and replied "Yep, sure did and it is working great.". I felt like Batman in the moment. In this post I will rant about the knowledge gap around hacking and then describe about one of the components of my home automation project (really, this is the main reason for this post) and use that as an example how hacking is cool and does not always mean bad. But first lets align on my definition of hacking: People use this term in good and bad, both ways. For example: "He/she did a hack job" -- Yeah, that probably...

Story of a Java application in the cloud on Heroku

Starting with a monolith application is not really uncommon. But when the demand arises it is important to have a plan or path to go distributed either a Big Bang change or phased approach. I took the phased approach and the phases sort of happened naturally (without even knowing the right technical terms, BUT the concept and vision was clear). I will try to tell the story in this post. Although I will use "sample app" and the tutorials I prepared for this is a "sample app", I have faced the scenarios in real life few years ago and learned a thing or two. I am using Heroku for this "sample app" but this can also be implemented in AWS or Azure. I am sure there's always a better way of doing it, but this is how I have approached it.   Firstly, let's set some functional specification for our "sample app": The app will take request from the user (there's no restriction on how many users can request the app in a given second.) via browser....

Reimagining Logs: Building AI powered Conversational Observability System

It is mid-2025 and the cogs of AI are at full speed. So we (I and Mobin) decided to do our own AI project. We called it "IntelliLogs".  IntelliLogs at a glance: Demo:  https://www.youtube.com/watch?v=OXMlORwyMQk In this post I will describe why we did what we did, what is it that we did and how we did it. I will share my personal experience. I am hoping this will, at least, be an interesting read. Table of contents: Why IntelliLogs What is IntelliLogs How IntelliLogs was developed Future of IntelliLogs Conclusion References Why IntelliLogs: Personal motivation 💪 to this were: Explore and experience what does an AI app look like from an architectural and engineering perspective Explore the realm of Huge LLMs (eg: GPT-4.1-170B,  Gemini Pro etc) vs small LLMs (eg: granite-7b, gemma-4b) Explore the possibilities of model tuning / making a model without being a data scientist. How easy or hard it is, what tools available etc. We also wanted to tackle a "not too far from ...