[RTE] probleem met lowercase

[isomis]

Beste Tweakers,

Ik ben op dit moment druk bezig met een eigen RTE. Alleen ik heb wat problemen met de cleanup functie:

Allereerst even de code (het is een teringzooi, maar dat komt ook omdat er zoveel uitzonderingen zijn in IE/firefox):

JavaScript:

function HTMLcleanup(s){

    s = '<p>'+ s;

    var lowercase = new RegExp('<(.*?)(.*?)>','gi');

    while (matches=lowercase.exec(s)) {
        s =s.replace(matches[0],matches[0].toLowerCase());
    }

    //delete spacing between tags
    var ok = new RegExp('> <','gi');
    s = s.replace(ok,'><');

    var ok = new RegExp('<tbody>','gi');
    s = s.replace(ok,'');
     var ok = new RegExp('</tbody>','gi');
    s = s.replace(ok,'');

    // make one line
    s = s.replace(/\r\n/g, ' ').replace(/\n/g, ' ').replace(/\r/g, ' ').replace(/\&nbsp\;/g,' ');

    //clean up tags
    s = s.replace(/<b [^>]*>/gi,'<b>').replace(/<i [^>]*>/gi,'<i>').replace(/<li [^>]*>/gi,'<li>').replace(/<ul [^>]*>/gi,'<ul>');

    //delete first <br>
    var beginbr = new RegExp('^<br>','gi');
    s = s.replace(beginbr, '');

    //delete last <br>
    var endbr = new RegExp('<br>$','gi');
    s = s.replace(endbr, '');

    //close br
    var brclose = new RegExp('<br (.*?)>','gi');
    s = s.replace(brclose, '<br />');
    var brclose = new RegExp('<br>','gi');
    s = s.replace(brclose, '<br />');

    //close img
    var imgclose = new RegExp('<img[^>]([^>]*)>','gi');
    s = s.replace(imgclose, '<img $1 />');

    // Open closed tags like <b/> to <b></b>
    s = s.replace(new RegExp('<(h[1-6]|p|div|address|pre|form|table|li|ol|ul|td|b|font|em|strong|i|strike|u|span|a|ul|ol|li|blockquote)([a-z]*)([^\\\\|>]*)\\/>', 'gi'), '<$1$2$3></$1$2>');

    // Remove trailing space <b > to <b>
    s = s.replace(new RegExp('\\s+></', 'gi'), '></');

    // Close tags <img></img> to <img/>
    //s = s.replace(new RegExp('<(img|br|hr)([^>]*)><\\/(img|br|hr)>', 'gi'), '<$1$2 />');

    // Weird MSIE bug, <p><hr /></p> breaks runtime?
    if (!bIsNetscape)
        s = s.replace(new RegExp('<p><hr \\/><\\/p>', 'gi'), "<hr>");

    // Weird tags will make IE error #bug: 1538495
    if (!bIsNetscape)
        s = s.replace(/<!(\s*)\/>/g, '');


    var emptytarget = new RegExp('target=""','gi');
    s = s.replace(emptytarget,'');

    var emptytarget = new RegExp('target="_self"','gi');
    s = s.replace(emptytarget,'');



    var emptytags = new RegExp('<u><br /></u>', 'gi');
    s = s.replace(emptytags, '');

    var emptytags = new RegExp('<strong><br /></strong>', 'gi');
    s = s.replace(emptytags, '');

    var emptytags = new RegExp('<strong></strong>', 'gi');
    s = s.replace(emptytags, '');

    var emptytags = new RegExp('<u></u>', 'gi');
    s = s.replace(emptytags, '');

    //var openp = new RegExp('<br /><br />','gi');
    //s = s.replace(openp,'<p>');

    var p = new RegExp('/<p>\s*<br \/>\s*<\/p>/g','gi');
    s = s.replace(p,'<p>&nbsp;</p>');

    var p = new RegExp('<p></p>','gi');
    s = s.replace(p,'');

    var p = new RegExp('<p>&nbsp;</p>','gi');
    s = s.replace(p,'');

    s += '</p>';

    var p = new RegExp('<p>\\s*<\\/p>','gi');
    s = s.replace(p,'');

    var p = new RegExp('</p>\\s*</p>','gi');
    s = s.replace(p,'</p>');

    var p = new RegExp('<p><p>','gi');
    s = s.replace(p,'<p>');

    var ok = new RegExp('<p>&nbsp;</p>','gi');
    s = s.replace(ok,'');

    var ok = new RegExp('&nbsp;','gi');
    s = s.replace(ok,'');

    var ok = new RegExp('<p>\\s*<table','gi');
    s = s.replace(ok,'<table');

    var ok = new RegExp('</table>\\s*</p>','gi');
    s = s.replace(ok,'</table>');

    var ok = new RegExp('<p><br /></p>','gi');
    s = s.replace(ok,'');

    var ok = new RegExp('<p><p>','gi');
    s = s.replace(ok,'<p>');

    var ok = new RegExp('</p></p>','gi');
    s = s.replace(ok,'</p>');

    var ok = new RegExp('<p><p','gi');
    s = s.replace(ok,'<p');

    var ok = new RegExp('é','gi');
    s = s.replace(ok,'&eacute;');

    var ok = new RegExp('©','gi');
    s = s.replace(ok,'&copy;');


    var ok = new RegExp('€','gi');
    s = s.replace(ok,'&euro;');

    s = s.replace(/<\/?font[^>]*>/gi,'');

    s = s.replace(/ class=[^\s|>]*/gi,'');

    var ok = new RegExp('<p><ul>','gi');
    s = s.replace(ok,'<ul>');

    var ok = new RegExp('</ul></p>','gi');
    s = s.replace(ok,'</ul>');

    oldlen = s.length + 1;
    while(oldlen > s.length) {
        oldlen = s.length;
        // join us now and free the tags, we'll be free hackers, we'll be free... ;-)
        s = s.replace(/<([a-z][a-z]*)> *<\/\1>/gi,' ').replace(/<([a-z][a-z]*)> *<([a-z][^>]*)> *<\/\1>/gi,'<$2>');
    }
    s = s.replace(/<([a-z][a-z]*)><\1>/gi,'<$1>').
        replace(/<\/([a-z][a-z]*)><\/\1>/gi,'<\/$1>');
    // nuke double spaces
    s = s.replace(/  */gi,' ');


    var boldunderline = new RegExp('<p style="font-weight: bold;">(.*?)</p>', 'gi');
    s = s.replace(boldunderline, '<p><strong>$1</strong></p> ');


    var boldunderline = new RegExp('<span style="font-style: italic;">(.*?)</span>', 'gi');
    s = s.replace(boldunderline, ' <em>$1</em> ');

    var boldunderline = new RegExp('<p style="font-style: italic;">(.*?)</p>', 'gi');
    s = s.replace(boldunderline, '<p><em>$1</em></p>');

    var ok = new RegExp('</ul></p>','gi');
    s = s.replace(ok,'</ul>');

    var border = new RegExp('border=1','gi');
    s = s.replace(border,'border="0"');

    var border = new RegExp('border="1"','gi');
    s = s.replace(border,'border="0"');


    // fix mozilla align - no div
    var brclose = new RegExp('<p><div style="text-align: (.*?);">(.*?)</div></p>','gi');
    s = s.replace(brclose, '<p style="text-align: $1">$2</p>');

    // fix ie align
    var iealign = new RegExp('<p align=(.*?)>(.*?)</p>','gi');
    s = s.replace(iealign, '<p style="text-align: $1;">$2</p>');

    // delete leftalign
    var leftalign = new RegExp('<p style="text-align: left;">(.*?)</p>','gi');
    s = s.replace(leftalign, '<p>$1</p>');

    s = s.replace(/<td>\s*<br \/>\s*<\/td>/g, '<td></td>');

    //delete spacing between tags
    var ok = new RegExp('> <','gi');
    s = s.replace(ok,'><');

    //delete spacing between tags
    var ok = new RegExp('>  <','gi');
    s = s.replace(ok,'><');

    if (bIsNetscape) {

        var bold = new RegExp('<span style="font-weight: bold;">(.*?)</span>', 'gi');
        s = s.replace(bold, '<strong>$1</strong>');

        var bold = new RegExp('<span style="font-weight: italic;">(.*?)</span>', 'gi');
        s = s.replace(bold, '<em>$1</em>');

        var bold = new RegExp('<span style="font-weight: bold; font-style: italic;">(.*?)</span>', 'gi');
        s = s.replace(bold, '<strong><em>$1</em></strong>');

        var bold = new RegExp('<span style="font-style: italic; font-weight: bold;">(.*?)</span>', 'gi');
        s = s.replace(bold, '<em><strong>$1</strong></em>');

        var boldunderline = new RegExp('<span style="font-weight: bold; text-decoration: underline;">(.*?)</span>', 'gi');
        s = s.replace(boldunderline, ' <strong><u>$1</u></strong> ');

        var boldunderline = new RegExp('<span style="text-decoration: underline; font-weight: bold;">(.*?)</span>', 'gi');
        s = s.replace(boldunderline, '<strong><u>$1</u></strong>');

        s = s.replace(/<b>/gi, '<strong>');
        s = s.replace(/<i(\/?)>/gi, '<em>');
        s = s.replace(/<i>/gi, '<em>');
        s = s.replace(/<\/b>/gi, '</strong>');
        s = s.replace(/<\/i>/gi, '</em>');
    }

    s = s.replace(/<\?xml:[^>]*>/g, '').       // Word xml
    replace(/<\/?st1:[^>]*>/g,'').     // Word SmartTags
    replace(/<\/?[a-z]\:[^>]*>/g,'').  // All other funny Word non-HTML stuff
    replace(/<\/?font[^>]*>/gi,'').    // Disable if you want to keep font formatting
    replace(/<\/?span[^>]*>/gi,' ').
    replace(/<\/?div[^>]*>/gi,' ').
    replace(/<\/?pre[^>]*>/gi,' ').
    replace(/<\/?h[1-6][^>]*>/gi,' ');
alert(s);
    return s;
}

Het probleem is als volgt:

Ik ram alles naar lowercase. Ik heb ooit dat stukje geschreven om alles naar lowercase te maken, omdat internet explorer veel lelijke uppercase heeft. De code kan een stuk netter en daarnaast heb ik het volgende probleem:

Het gebeurdt wel eens dat een persoon een url/source attribute gebruikt die hoofdletters heeft. Deze letters mogen niet klein gemaakt worden, maar al de andere wel.

Ik heb al druk gezocht op het internet en het besproken op verschillende fora. Jammer genoeg nog geen antwoord. Tevens heb ik de standaard rte editors op deze markt bekeken.

Zou iemand mij hiermee kunnen helpen?

p.s. ik heb ook nog een resetHTML als er geedit wordt:

JavaScript:

function resetHTML(s){

    var border = new RegExp('border="0"','gi');
    s = s.replace(border,'border="1"');

    if (bIsNetscape) {

        s = s.replace(/<strong>/gi, '<b>');
        s = s.replace(/<em(\/?)>/gi, '<i>');
        s = s.replace(/<em>/gi, '<i>');
        s = s.replace(/<\/strong>/gi, '</b>');
        s = s.replace(/<\/em>/gi, '</i>');
    }

    return s;
}

Ben een stapje verder:

JavaScript:

var allElements = document.getElementsByTagName('*');
for(var i=0; i < allElements.length; i++) {
alert('This is an element "' + allElements[i].tagName + '"!');
}

dit stukje code selecteert alle elementen. Nu nog omzetten naar lowercase


Opgelost:

Ik zorg dat alle elementen lowercase zijn op het moment dat de submit plaats vindt:

JavaScript:

function submitContent(){

    var classes = getElementsByClassName(document, "div", 'editor');
    
    for(var iv=0; iv<classes.length; iv++){
        var iframevalue = document.getElementById(classes[iv].id + '_frame').contentWindow.document.body.innerHTML;     
        
        // delete uppercase meuk    
        var allElements = document.getElementById(classes[iv].id + '_frame').contentWindow.document.body.getElementsByTagName('*');
        var tag = new Array();
        for(var i=0; i < allElements.length; i++) tag[i] = allElements[i].tagName;
        
        tag = tag.unique();
        for(var i=0; i < tag.length; i++){          
            var ok = new RegExp(tag[i],'gi');   
            iframevalue = iframevalue.replace(ok,tag[i].toLowerCase());
        }       
        var cleanHTML = HTMLcleanup(iframevalue);
        document.getElementById(classes[iv].id + '_text').value = cleanHTML;
                
    }
}

Mvg,

Matthijs

[ Voor 8% gewijzigd door isomis op 24-11-2006 12:09 ]