Thursday, 17 March 2016

Rich Text Editor validator (using HTML Parser) in SharePoint 2013

Requirement:
Contents in SharePoint in rich text column was getting consumed in iOS app.
There was some issues in WebView consuming some of the data which it find was not well formatted. Although such contents were rendered perfectly alright in SharePoint.

Solution:
Using JSlink rich text were validated on Blur of the rich text div element.

(function () {
    var zPlaceholder = "Default";
    var overrideCtx = {};
})();

jQuery(document).ready(function () {
   
  
    jQuery.getScript(_spPageContextInfo.siteAbsoluteUrl + '/Style%20Library/scripts/htmlparser.js', GetRTEandFixHtml());
});

function GetRTEandFixHtml() {
    // Get the rich text edit field by id starts with e.g. [id^='ProfileInformation'] ...
   // along with class and role
    var ProfileInformation = $("div[id^='ProfileInformation'][class='ms-rtestate-write ms-rteflags-0 ms-rtestate-field'][role='textbox']");
    if (ProfileInformation !== "undefined" || ProfileInformation !== null) {
        ProfileInformation.blur(function () {
            fixHTML(ProfileInformation, ProfileInformation.html());
        });
    }

    function fixHTML(element, html) {
        // Check if there is value or not before validating HTML...
        if (html.indexOf("div class=") > 0 && html.indexOf("ExternalClass") > 0) {
            try {
                var d = document.createElement('div');
                d.innerHTML = html;
                element.html(d.innerHTML); // Strips off script tags, which was major issue;
                var modifiedHTML = HTMLtoXML(d.innerHTML);// Can implement htmlparser.js call .. there are few available in JS;
                element.html(modifiedHTML);
            }
            catch (e) {
                element.html(html);
                element.unbind('blur');
            }
        }
    }

}

No comments:

Post a Comment