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 App Details Page Error

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

SharePoint 2013 Features Information List