SharePoint 2010 Version:
(function ($) {
$.fn.SPEditable = function () {
return this.each(function () {
$(this).addClass("ms-rtestate-write ms-rteflags-0 ms-rtestate-field").attr("role", "textbox").attr("aria-haspopup", "true").attr("style", "min-height: 84px;").attr("contentEditable", "true").attr("UseInlineStyle", "True").attr("aria-autocomplete", "both").attr("aria-multiline", "true");
});
};
$.fn.SPNonEditable = function () {
return this.each(function () {
$(this).removeClass("ms-rtestate-write ms-rteflags-0 ms-rtestate-field").removeAttr("role aria-haspopup style contentEditable UseInlineStyle aria-multiline");
});
};
})(jQuery);
Usage:
$("#myDiv").SPEditable();
The result is amazing:
One thing to remember: this only works when you are in edit mode either in a list item or page.
An advanced example:
SharePoint 2013 version:
(function ($) {
$.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");
});
};
$.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");
});
};
})(jQuery);
If you want to use it when you are in non edit mode either in a list item or page, you need to insert
ReplyDeleteMakeRTEContextualTabsAvailable();
SCRIPT5009: 'MakeRTEContextualTabsAvailable' is undefined..... example please
ReplyDeleteI couldn't make it work on View Pages.
ReplyDeleteI've tried adding these links:
< link type="text/javascript" href="/_layouts/15/sp.ui.rte.js" / >
< link type="text/javascript" href="/_layouts/15/sp.ui.rte.publishing.js" / >
< link type="text/javascript" href="/_layouts/15/sp.ui.spellcheck.js" / >
Also, I've added this code to the codebehind:
var curRibbon = SPRibbon.GetCurrent(this.Page);
curRibbon.MakeRTEContextualTabsAvailable("WSSRTE");
curRibbon.EnableVisibilityContext("WSSRTE");
Looks like I am not really sure how to take advantage of the OOB contextual ribbon groups.
If anyone knows how to make it work on View pages - that would be great!
Hello,
ReplyDeleteI would like to know how to achieve the functionality shown on the second screenshot (sections with move up/move down buttons). Is this SharePoint standard functionality?
Regards,
Ronny
Hi, Ronny, I this is a custom solution. Tabs are from jQuery UI "Tabs". Text editing is achieved via using the plugin I've included in this post. There is also a jQuery pluging that allows you to move dom elements up and down. So, in short, this is some 600 strings of custom JavaScript code that do what you see on the screenshot. Maybe I'll write a separate post explaining how to do it.
ReplyDeleteHi Denis
ReplyDeleteI am trying to implement the above logic on a publishing page in SharePoint 2013 and I am not getting RTE experience for the div I am interested in. My page will be there in SharePoint online and not on-premise and I we need this RTE behavior for one of the div that I placed on that page.
-Premchand
were you ever able to fix this? I'm currently running into the same issue.
Deletecan you provide code for new item form that moves the page sections around with tabs.
ReplyDeleteHi Denis,
ReplyDeleteThanks for the plugin, but there seems to be some issue when you try in Office 365. Rest of the things work perfect but if you try to add SharePoint link or SharePoint Picture, option seems to be disabled.
-Tejas