SharePoint 2013 Custom web part with rich text box that triggers SharePoint ribbon

I was creating a web part form which needs to have a rich text editor text box.  The SharePoint 2013 ribbon style works well and looks good.  So, I was looking to utilize it.  To keep the story short, I found the solution in a post, http://sharepoint.stackexchange.com/questions/64698/rich-text-editor-ribbon-based-in-a-webpart-in-sharepoint-2013.

In case the link disappeared later, I copied the solution below.

ASPX / ASCX:

id="editor">
id="RTEDiv" tabindex="0">
ID="RTEDivHidden" runat="server" />
class="commands"> ID="btnSubmit" Text="Отправить" runat="server" CssClass="editorbtn" /> type="button" value="Отмена" id="btnCancel" class="editorbtn" />
Simple div container, future rich text div id="RTEDiv", hidden field to post data and two simple buttons.

JS:

(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)) {
                currentBindings.unshift(currentBindings.pop());
            }
        });
        return this;
    };
})(jQuery);
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
$("#RTEDiv").SPEditable();

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

Codebehind:

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.MakeRTEContextualTabsAvailable(SPRibbon.RTEVisibilityContext);
        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("pure html text");

Comments

Popular posts from this blog

SharePoint 2013 - Working with Display Template for Content Search Web Part

How to Customize MOSS Site Manager (Site Content and Structure Page)

Add spell check dictionary in SharePoint 2010, SharePoint 2013, and Office 365