SharePoint Rich Text Editor jQuery Plugin
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
jQuery.spHtmlEditor.js

README.md

jQuery.spHtmlEditor

SharePoint Rich Text Editor jQuery Plugin

Matthew Stark / Making Things Work

Loads the SharePoint RTE onto a page using JavaScript. Plugin works on both Office 365 and On-Premises versions of SharePoint.

Tested on:

  • Office 365
  • SharePoint 2013, SharePoint 2016
  • jQuery 2.1.4

##Loading Plugin:

  1. Reference jQuery and the jQuery.spHtmlEditor JavaScript files:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" ></script>

<script src="/SiteAssets/jQuery.spHtmlEditor.js" ></script>;
  1. Insert HTML Element to host the RTE content:
<div id="rteeditor"><p>RTE Content</p></div>
  1. Load the Rich Text Area after page has loaded (ensure init.js & SP.js are referenced on the page):
(function($) {
   ExecuteOrDelayUntilScriptLoaded(function(){
      $(function() {
        $("#rteeditor").spHtmlEditor();
      });
   },'sp.js');
})(jQuery);

##Supported options:

noContentHtml: The HTML to be displayed if there is no content in the RTE. Default: "<span>Click here to Edit</span>"

callback: Method that is called when the form is submitted. Default empty method.

className: Class name to append to the editor container. Default empty string.

version: o365/onprem - text value indicating platform target "o365" or "onprem". Default "o365".

method: add/remove/sethtml/gethtml - indicates the method to execute. Default "add". See more below

prefixStylesheet: The CSS prefix for styles to be included in the ribbon. Default null which renders "ms-rte" styles.

prefixStylesheetUrl: Path to custom CSS file containing branding styles to be included in the ribbon. Must contain prefixStylesheet classes. Default: null;

##Supported Methods:

add: Initialize the spHtmlEditor within rteeditor HTML element.

$("#rteeditor").spHtmlEditor({
  version: "onprem",
  callback: function (html, id, webPart, webPartId) { alert("Processing"); },
  className: "my-js-rte",
  prefixStylesheet: "my-rte",
  prefixStylesheetUrl: "\u002fStyle Library\u002f<my-rte-customstylesheet>.css"
});

remove: Remove the spHtmlEditor from the HTML element (this will execute the callback function).

$("#rteeditor").spHtmlEditor({method: "remove"});

sethtml: Set the HTML within the spHtmlEditor:

$("#rteeditor").spHtmlEditor({method: "sethtml", html: "<p>New HTML Content</p>"});

gethtml: retrieve HTML from the first spHtmlEditor in selector.

$("#rteeditor").spHtmlEditor({method: "gethtml"});
//or use shorthand
$("#rteeditor").spHtmlEditor("gethtml");

##Further Reading Initial Release: http://makingthings.work/sharepoint-rte-jquery-plugin/