Total Pageviews

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

9 comments:

  1. If you want to use it when you are in non edit mode either in a list item or page, you need to insert
    MakeRTEContextualTabsAvailable();

    ReplyDelete
  2. SCRIPT5009: 'MakeRTEContextualTabsAvailable' is undefined..... example please

    ReplyDelete
  3. I couldn't make it work on View Pages.

    I've tried adding these links:
    < link type="text/javascript" href="/_layouts/15/sp.ui.rte.js" / >
    < link type="text/javascript" href="/_layouts/15/sp.ui.rte.publishing.js" / >
    < link type="text/javascript" href="/_layouts/15/sp.ui.spellcheck.js" / >


    Also, I've added this code to the codebehind:
    var curRibbon = SPRibbon.GetCurrent(this.Page);
    curRibbon.MakeRTEContextualTabsAvailable("WSSRTE");
    curRibbon.EnableVisibilityContext("WSSRTE");

    Looks like I am not really sure how to take advantage of the OOB contextual ribbon groups.

    If anyone knows how to make it work on View pages - that would be great!

    ReplyDelete
  4. Hello,

    I would like to know how to achieve the functionality shown on the second screenshot (sections with move up/move down buttons). Is this SharePoint standard functionality?

    Regards,
    Ronny

    ReplyDelete
  5. Hi, Ronny, I this is a custom solution. Tabs are from jQuery UI "Tabs". Text editing is achieved via using the plugin I've included in this post. There is also a jQuery pluging that allows you to move dom elements up and down. So, in short, this is some 600 strings of custom JavaScript code that do what you see on the screenshot. Maybe I'll write a separate post explaining how to do it.

    ReplyDelete
  6. Hi Denis

    I am trying to implement the above logic on a publishing page in SharePoint 2013 and I am not getting RTE experience for the div I am interested in. My page will be there in SharePoint online and not on-premise and I we need this RTE behavior for one of the div that I placed on that page.


    -Premchand

    ReplyDelete
    Replies
    1. were you ever able to fix this? I'm currently running into the same issue.

      Delete
  7. can you provide code for new item form that moves the page sections around with tabs.

    ReplyDelete
  8. Hi Denis,

    Thanks for the plugin, but there seems to be some issue when you try in Office 365. Rest of the things work perfect but if you try to add SharePoint link or SharePoint Picture, option seems to be disabled.

    -Tejas

    ReplyDelete