Total Pageviews

Showing posts with label WYSIWYG. Show all posts
Showing posts with label WYSIWYG. Show all posts

14 Jun 2013

jQuery plugin for SharePoint 2010/2013 That turns on WYSIWYG Feature for Selected DIV Tags, Hack

Enable and disable native SharePoint WYSIWYG HTML Editor:

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