Cross-Browser RichText Editor Solution For SharePoint

I was recently building a custom application page in SharePoint to allow users to update their User Profile information. One of the fields, the 'About Me' field, was to contain rich text. My first choice was to use SharePoint's InputFormTextBox control. Seemed like the perfect control. However this proved to be less than trivial as my custom page was quite complicated including update panels and grid views, which caused the control to behave strangely. First thing to note is that this control only works in IE. Second, with the existence of update panels, on every PostBack the control was being rendered again. This was causing the data to be lost and also having duplicate controls on the page. I spent some time Googling this and realized many people were having the same problem.. And I even attempted some of the workarounds posted online, but was not able to fix it. So I decided to take a different approach.

I am a big fan of making custom SharePoint apps look and behave like an OOTB SharePoint app. So I decided to take advantage of the Ribbon and it's RichText capabilities. In this post I will outline the steps required to enable the Ribbon's RichText capabilities for your custom application page.

Note: I am using jQuery, but it is not necessary.

Step 1: Enable Ribbon to Show RichTextEditor

This step is needed to enable the Ribbon's RichTextEditor controls, without this your Ribbon will be empty. This should be placed in the Page_Load event:

[code language="csharp"]
protected void Page_Load(object sender, EventArgs e)
{
SPRibbon current = SPRibbon.GetCurrent(this.Page);
if (current != null)
{
current.MakeRTEContextualTabsAvailable(SPRibbon.RTEVisibilityContext);
current.Visible = true;
current.CommandUIVisible = true;
}
}
[/code]

Step 2: Add HTML Markup to ASPX Page

Now that we have enabled the RichText controls of the Ribbon, we can go ahead and add the HTML markup.

The markup consists of a DIV and a hidden INPUT control in combination to achieve what we want. The user will be using the DIV to enter their text, but on the server, we will read the value from the hidden INPUT control.

[code language="html"]
<div class="aspNetHidden">
<input id="aboutMeHidden" type="hidden" value="" />
</div>
<div class="ms-rtestate-write ms-inputuserfield ms-long" id="aboutMeEditableRegion" style="height: 100%; overflow: scroll;"></div>
[/code]

With this HTML markup, if the user clicks inside the DIV, the Ribbon will dropdown and expose the RichText controls.

Step 3: Add the JavaScript

In this last step, we just need to copy the contents of the DIV into the hidden INPUT control and vice-versa. So when the page loads, we need to copy the contents of the hidden INPUT control into the DIV. And when focus is lost from the DIV, we need to copy the contents of the DIV back into the hidden INPUT control. Place the following JavaScript in a SCRIPT tag at the bottom of your ASPX page:

[code language="javascript"]
$(document).ready(function () {
// Copy the contents of the hidden input control into the div
$("#aboutMeEditableRegion").html($("#aboutMeHidden").val());

// Copy the contents of the div back into the hidden input control
$("#aboutMeEditableRegion").on('blur', function () {
$("#aboutMeHidden").val($("#aboutMeEditableRegion").html());
});
});
[/code]

Conclusion

So if you are looking to add a RichText control to your custom SharePoint application page, try this approach! Not only does it look super cool, but also works in different browsers.

It’s Time To Transform

Let us show you how much easier your work life can be with Bonzai Intranet on your team.