SharePoint Rich Text Editor jQuery Plugin

SharePoint hỗ trợ sẵn rich text editor cho các ô nhập text, tuy nhiên khi bạn customize default SharePoint List Forms (new form, edit form, display form) thì bạn sẽ phải dùng SharePoint Rich Text Editor jQuery Plugin.

Tại sao nên dùng jQuery plugin này?

HTML chỉ hỗ trợ cho bạn textarea để nhập nhiều nội dung. Tuy nhiên là bạn không thể sử dụng textarea như 1 rich text editor được (vì bản thân textarea chỉ cho nhập text thuần mà thôi). Do vậy, để sử dụng textarea như 1 Publishing HTML fields trong SharePoint thì bạn nên dùng plugin này.

Plugin này support cả SharePoint on-premises và SharePoint Online (Office 365) luôn bạn nhé.

Download jQuery.spHtmlEditor.js trên GitHub

https://github.com/MakingThingsWorkToronto/jQuery.spHtmlEditor

Usage:

Trong bài này là bản hướng dẫn sử dụng mới nhất. Tuy nhiên, bạn nên xem trực tiếp tại github để được update nội dung mới nhất nhé.

Loading plugin:

  1. Reference jQuery và 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. Thêm HTML element để chứa RTE content:

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

3. Load the Rich Text Area sau khi trang đã load xong:

(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: “Click here to Edit”

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

Nguồn: vothanhduy.com

Leave a Reply

Your email address will not be published. Required fields are marked *