SharePoint 2013/2010 使用JavaScript 将Div转换(render)成 Rich Text Box

本文讲述在SharePoint 2013/2010中 使用JavaScript 将Div转换(render)成 Rich Text Box。

在SharePoint 开发的过程中，如果不能使用C#代码只用前台JavaScript,很难给页面添加Rich Text Box (可以和SharePoint的Ribbon menu 一起结合使用)，而这种需求是比较多的，因为SharePoint开发越来越多的使用JavaScript，特别是SharePoint 2013,而且Office 365和SharePoint online 只能用JavaScript来进行二次开发。

 SharePoint 2013 方案：

 (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);   
 
 
$(document).ready(function () {
  $("#myDiv").SPEditable();     
});

效果:

 SharePoint 2010 方案：

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

$(document).ready(function () {
  $("#myDiv").SPEditable();     
});

效果:

注意2010/2013都需要预先引入Jquery.