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.
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