Support forums » Products » Rich Text Editor for .NET and ... » Re: Sample - HTML filter to only keep basic format

Sample - HTML filter to only keep basic format

Last post 04-25-2013, 4:00 AM by Adam. 1 replies.
Sort Posts: Previous Next

  •  04-10-2013, 11:01 PM 77206

    Sample - HTML filter to only keep basic format

    Reply Quote

    I thought I would share this for anyone looking to do something similar.

    The idea here is to be able to paste in content and keep only basic formatting such as new lines, bold, italic, underline and lists.  Anything else such as fonts, font-size, links etc are dropped.

    This allows content from multiple sources to be easily combined without playing with formatting.

    The code is cobbled together from various sources and I'm pretty new to JavaScript and DOM so I wouldn't be surprised if there are better ways to do this.

    Cheers

    1. function RichTextEditor_OnPasteFilter(rteeditor, info) {  
    2.             var html = info.Arguments[0];  
    3.             var cmd = info.Arguments[1];  
    4.             var i;  
    5.             var attr;  
    6.             var newElement;  
    7.             var node, nodeChild;  
    8.              
    9.             // convert string to dom model to check if there are any html elements  
    10.             var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  
    11.             xmlDoc.async = false;  
    12.             html = '<span>' + html + '</span>'  
    13.             xmlDoc.loadXML(html);  
    14.   
    15.             if (xmlDoc.hasChildNodes()) {  
    16.                 // find and replace style-based bold, italic and underline formatting with simple html elements  
    17.   
    18.                 // declare function to recursively walk through dom model based on html string  
    19.                 var walkDOM = function (node, func) {  
    20.                     if (node.attributes) {  
    21.                         func(node);  
    22.                     }  
    23.                     node = node.firstChild;  
    24.                     while (node) {  
    25.                         walkDOM(node, func);  
    26.                         node = node.nextSibling;  
    27.                     }  
    28.                 }  
    29.   
    30.                 //-- add bold element where style contains "font-weight:bold" (or bolder, 700, 800 or 900)  
    31.                 walkDOM(xmlDoc.firstChild, function AddBoldNode(node) {  
    32.                     attr = node.getAttribute("style");  
    33.                     if (attr) {  
    34.                         attr = attr.replace(" ", "").toLowerCase();  
    35.                         if (attr.indexOf("font-weight:bold") >= 0 || attr.indexOf("font-weight:700") >= 0 || attr.indexOf("font-weight:800") >= 0 || attr.indexOf("font-weight:900") >= 0) {  
    36.                             newElement = xmlDoc.createElement('b');  
    37.                             nodeChild = node.firstChild;  
    38.                             node.replaceChild(newElement, nodeChild);  
    39.                             newElement.appendChild(nodeChild);  
    40.                         }  
    41.                     }  
    42.                 });  
    43.   
    44.                 //-- add underline element where style contains "text-decoration:underline"  
    45.                 walkDOM(xmlDoc.firstChild, function AddUnderlineNode(node) {  
    46.                     attr = node.getAttribute("style");  
    47.                     if (attr) {  
    48.                         attr = attr.replace(" ", "").toLowerCase();  
    49.                         if (attr.indexOf("text-decoration:underline") >= 0) {  
    50.                             newElement = xmlDoc.createElement('u');  
    51.                             nodeChild = node.firstChild;  
    52.                             node.replaceChild(newElement, nodeChild);  
    53.                             newElement.appendChild(nodeChild);  
    54.                         }  
    55.                     }  
    56.                 });  
    57.   
    58.                 //-- add italic element where style contains "font-style:italic"  
    59.                 walkDOM(xmlDoc.firstChild, function AddItalicNode(node) {  
    60.                     attr = node.getAttribute("style");  
    61.                     if (attr) {  
    62.                         attr = attr.replace(" ", "").toLowerCase();  
    63.                         if (attr.indexOf("font-style:italic") >= 0) {  
    64.                             newElement = xmlDoc.createElement('i');  
    65.                             nodeChild = node.firstChild;  
    66.                             node.replaceChild(newElement, nodeChild);  
    67.                             newElement.appendChild(nodeChild);  
    68.                         }  
    69.                     }  
    70.                 });  
    71.   
    72.                 //-- reduce ol, ul, dl, li, p elements with complex attributes to basic  
    73.                 walkDOM(xmlDoc.firstChild, function CleanComplexAttr(node) {  
    74.                     switch (node.nodeName) {  
    75.                         case "ul": case "ol": case "li": case "dl": case "p": case "div":  
    76.                             // found element so remove any attributes  
    77.                             for (i = node.attributes.length; i-- > 0; ) {  
    78.                                 node.removeAttributeNode(node.attributes[i]);  
    79.                             }  
    80.                             break;  
    81.                         default:  
    82.                     }  
    83.                 });  
    84.   
    85.                 // return html code as string  
    86.                 html = xmlDoc.xml;  
    87.             }  
    88.   
    89.             //-- temporarily change other safe tags to keep  
    90.             html = html.replace(/<ol>/gim, "&lt;ol&gt;");  
    91.             html = html.replace(/<ul>/gim, "&lt;ul&gt;");  
    92.             html = html.replace(/<\/ol>/gim, "&lt;/ol&gt;");  
    93.             html = html.replace(/<\/ul>/gim, "&lt;/ul&gt;");  
    94.             html = html.replace(/<li>/gim, "&lt;li&gt;");  
    95.             html = html.replace(/<\/li>/gim, "&lt;/li&gt;");  
    96.             html = html.replace(/<br>/gim, "&lt;br&gt;");  
    97.             html = html.replace(/<br\s\/>/gim, "&lt;br&gt;");  
    98.             html = html.replace(/<br\/>/gim, "&lt;br&gt;");  
    99.             html = html.replace(/<p>/gim, "&lt;p&gt;");  
    100.             html = html.replace(/<\/p>/gim, "&lt;/p&gt;");  
    101.             html = html.replace(/<b>/gim, "&lt;b&gt;");  
    102.             html = html.replace(/<\/b>/gim, "&lt;/b&gt;");  
    103.             html = html.replace(/<strong>/gim, "&lt;b&gt;");  
    104.             html = html.replace(/<\/strong>/gim, "&lt;/b&gt;");  
    105.             html = html.replace(/<i>/gim, "&lt;i&gt;");  
    106.             html = html.replace(/<\/i>/gim, "&lt;/i&gt;");  
    107.             html = html.replace(/<emphasis>/gim, "&lt;i&gt;");  
    108.             html = html.replace(/<\/emphasis>/gim, "&lt;/i&gt;");  
    109.             html = html.replace(/<u>/gim, "&lt;u&gt;");  
    110.             html = html.replace(/<\/u>/gim, "&lt;/u&gt;");  
    111.             html = html.replace(/<dl>/gim, "&lt;dl&gt;");  
    112.             html = html.replace(/<\/dl>/gim, "&lt;/dl&gt;");  
    113.             html = html.replace(/<dd>/gim, "&lt;dd&gt;");  
    114.             html = html.replace(/<\/dd>/gim, "&lt;/dd&gt;");  
    115.             html = html.replace(/<dt>/gim, "&lt;dt&gt;");  
    116.             html = html.replace(/<\/dt>/gim, "&lt;/dt&gt;");  
    117.             html = html.replace(/<div>/gim, "&lt;div&gt;");  
    118.             html = html.replace(/<\/div>/gim, "&lt;/div&gt;");  
    119.   
    120.             //-- remove all inside SCRIPT and STYLE tags  
    121.             html = html.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gim, "");  
    122.             html = html.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gim, "");  
    123.   
    124.             //-- remove all else  
    125.             html = html.replace(/<(?:.|\s)*?>/gim, "");  
    126.   
    127.             //-- restore tags to keep  
    128.             html = html.replace(/\&lt;p\&gt;/g, "<p>");  
    129.             html = html.replace(/\&lt;\/p\&gt;/g, "</p>");  
    130.             html = html.replace(/\&lt;br\&gt;/g, "<br>");  
    131.   
    132.             html = html.replace(/\&lt;b\&gt;/g, "<b>");  
    133.             html = html.replace(/\&lt;\/b\&gt;/g, "</b>");  
    134.             html = html.replace(/\&lt;i\&gt;/g, "<i>");  
    135.             html = html.replace(/\&lt;\/i\&gt;/g, "</i>");  
    136.             html = html.replace(/\&lt;u\&gt;/g, "<u>");  
    137.             html = html.replace(/\&lt;\/u\&gt;/g, "</u>");  
    138.             html = html.replace(/\&lt;li\&gt;/g, "<li>");  
    139.             html = html.replace(/\&lt;\/li\&gt;/g, "</li>");  
    140.             html = html.replace(/\&lt;ol\&gt;/g, "<ol>");  
    141.             html = html.replace(/\&lt;\/ol\&gt;/g, "</ol>");  
    142.             html = html.replace(/\&lt;ul\&gt;/g, "<ul style='list-style-type:disc'>");  
    143.             html = html.replace(/\&lt;\/ul\&gt;/g, "</ul>");  
    144.             html = html.replace(/\&lt;dl\&gt;/g, "<dl>");  
    145.             html = html.replace(/\&lt;\/dl\&gt;/g, "</dl>");  
    146.             html = html.replace(/\&lt;dd\&gt;/g, "<dd>");  
    147.             html = html.replace(/\&lt;\/dd\&gt;/g, "</dd>");  
    148.             html = html.replace(/\&lt;dt\&gt;/g, "<dt>");  
    149.             html = html.replace(/\&lt;\/dt\&gt;/g, "</dt>");  
    150.             html = html.replace(/\&lt;div\&gt;/g, "<div>");  
    151.             html = html.replace(/\&lt;\/div\&gt;/g, "</div>");  
    152.   
    153.             //-- get rid of more than 2 multiple line breaks:  
    154.             html = html.replace(/(?:(?:\r\n|\r|\n)\s*){2,}/gim, "\n\n");  
    155.   
    156.             //-- get rid of more than 2 spaces:  
    157.             html = html.replace(/ +(?= )/g, " ");  
    158.   
    159.             info.ReturnValue = html;  
    160.         }  

  •  04-25-2013, 4:00 AM 77291 in reply to 77206

    Re: Sample - HTML filter to only keep basic format

    Reply Quote

    ederkley,

     

    Thanks for the input.

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx
View as RSS news feed in XML