My goal is to create a rich text editor for a textarea in my custom webpart in SharePoint 2013. The data is saved outside the SharePoint, so I can't really use a sharepoint list for that.

I really like the way rich text editors work in SharePoint 2013 when you edit list items with enhanced rich text fields:

rich text editor with ribbon while editing a list item

When I use a built-in RTE control in my markup SharePoint:InputFormTextBox:

<SharePoint:InputFormTextBox ID="rftDefaultValue" 
    RichTextMode="FullHtml" runat="server" 
    TextMode="MultiLine" Rows="5">

It gives just an inline RTE in IE or nothing in Chrome:

Inline Rich Text Editor in IE and Chrome

The question is:

Could it be possible to use the cross browser ribbon based Rich Text Editor in custom webpart textareas?

3 Answers 3


You might also want to try this little jQuery plugin

It allows you to enable Ribbon WYSIWYG editor while you are in edit mode.

It works simply like this: $("#myDiv").SPEditable();

And the result might look like this:

And this is a real life example where this can be really useful:

Update: Now this plugin supports SP 2013:


Yes it is possible, check this tutorial out that is demonstrating how to create a Visual WebPart as a Text editor and it's also connected to Ribbon as claimed by author, however it's for SharePoint 2010 but I am pretty sure it will work as it is or with some changes for SharePoint 2013 as well.

Develop a custom editable Visual Web Part (WebPart)

Helpful Links





Blog Post is too lomg to add here but description is here,

I wanted to create a web part for Sharepoint 2010 that would let an editor add a block of free-form html to a page, but wrapped up in a nicely formatted HTML container of my choosing. I also wanted the web part to include some custom properties to allow the user to select some permutations for the HTML container (colour, position etc.). The key thing was that when the editor is amending the content, I wanted to be able to use the standard ribbon controls instead of having to hook in a 3rd party rich text control like Telerik RadEditor.

So, I assumed I could just take the build-in Content Editor Web Part (CEWP) and extend it. No dice - cos it's sealed!

So I ended up whipping out Reflector and digging into the CEWP code, ripping the guts out of it to hack a new webpart. The following Web Part does what I set out to do, and maybe it will be a good base for you too.


My complete solution for SharePoint 2013 - style ribbon-based rich-text editor. I made this some time ago, so I certainly borrowed some code from google.


<div id="editor">
    <div id="RTEDiv" tabindex="0"></div>
    <asp:HiddenField ID="RTEDivHidden" runat="server" />
    <div class="commands">
        <asp:Button ID="btnSubmit" Text="Submit" runat="server" CssClass="editorbtn" />
        <input type="button" value="Cancel" id="btnCancel" class="editorbtn" />

Simple div container, future rich text div id="RTEDiv", hidden field to post data and two simple buttons.


(function ($) {
    // add SP13 rich text params to div
    $.fn.SPEditable = function () {
        return this.each(function () {
            $(this).addClass("ms-rte-layoutszone-inner-editable ms-rtestate-write").attr("role", "textbox").attr("aria-haspopup", "true").attr("contentEditable", "true").attr("aria-autocomplete", "both").attr("aria-autocomplete", "both").attr("aria-multiline", "true");
    // remove SP13 rich text params from div
    $.fn.SPNonEditable = function () {
        return this.each(function () {
            $(this).removeClass("ms-rte-layoutszone-inner-editable ms-rtestate-write").removeAttr("role aria-haspopup contentEditable aria-autocomplete aria-multiline");
    // add event actions before existing ones
    $.fn.preBind = function (type, data, fn) {
        this.each(function () {
            var $this = $(this);

            $this.bind(type, data, fn);

            var currentBindings = $._data(this, "events")[type];
            if ($.isArray(currentBindings)) {
        return this;

preBind function is used for transfer rich-text data to hidden field on before submit (usage below). Then use this:

// Rich Edit start
// mark div as Ribbon enabled rich edit area

// transfer data from rich edit div to hidden field
$("input[id$='btnSubmit']").preBind("click", function () {
    var rText = $("#RTEDiv").html();


And the main part. In codebehind you have to do this:

protected void Page_Load(object sender, EventArgs e)
    // tweak SPRibbon to show RichEdit
    SPRibbon current = SPRibbon.GetCurrent(this.Page);
    if (current != null)
        current.Visible = true;
        current.CommandUIVisible = true;

    if (IsPostBack)
        var body = RTEDivHidden.Value;
        if (!string.IsNullOrWhiteSpace(body))
            // now you have pure HTML value of rich-text

To write something in rich-text div use this in JS:

$('#RTEDiv').html("<b>pure html text</b>");

And final result (sorry for lots of russian stuff):

Rich edit part of Ribbon correctly slides down and up, when you set of remove focus from rich-text div.

Hope this will help!

  • Thank you for sharing a complete solution! By the way, Could it be possible to have this without a need for code-behind? Commented Aug 25, 2014 at 12:44
  • 3
    As I remember, main problem was to made Rich-text part of ribbon available and enabled. I'm not sure if this possible from inside JS. Hidden field and "prebind" method is optional, of course. Commented Aug 26, 2014 at 6:51
  • Thanks for the exhaustive answer. Really helped me to tame that damn WYSIWYG in a proper way. Commented Aug 29, 2016 at 16:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.