SharePoint Rich Text Editor jQuery Plugin: Download/Release

jQuery.spHtmlEditor As SharePoint professionals we all love and loath the SharePoint Rich Text Editor. At times working perfectly, and others mucking our markup with non breaking spaces we don't want and never asked for. It is what it is: the tool for the task in SharePoint 2010 and beyond, the backbone of the Content Editor and core to Publishing HTML fields.

jQuery.spHtmlEditor is a 100% JavaScript solution which creates a SharePoint Rich Text Editor client side. A simple to implement jQuery plugin with support for Office 365 and On Premises versions of SharePoint 2013.

Tasked with building a form or a UI component consisting of rich text or HTML markup? Want to follow modern SharePoint best practices and build a JavaScript solution? May be you're creating a new list item using the REST API, sending data via proxy to a remote endpoint, massaging data before passing it back into SharePoint via post back, or adding to a custom SharePoint Add-In. We need a RTE, don't want to fiddle in back end unsupported programming languages.

Download jQuery.spHtmlEditor.js on GitHub:
Download jQuery.spHtmlEditor.js at GitHub here.

Usage:

Up to date usage instructions will be posted in the readme file on GitHub. Here is a summary of the first release:

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

2) Insert HTML Element to host the RTE content:

<div id="rteeditor"><p>RTE Content</p></div>  

3) Load the Rich Text Area after page has loaded:

(function($) {

   $(function() {
     $("#rteeditor").spHtmlEditor();
   });

})(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");

Get in Touch!

Matthew Stark

Founder, Making Things Work

Let's talk about your project & how I can help! Reach out at the below coordinates.

Connect on Linkedin read more about Matt »

Top Tags