PDA

View Full Version : HtmlEditor - Replace text on paste



andregufc
15 Dec 2009, 7:36 AM
i have a htmleditor with defaul text format (times new roman and 10 size), the htmledito also has the options to apply bold, italic and underline.

My problem is when a user copy the text from anywhere, (like word and html) i want to remove all formating, except the bold, italic and underline.

After some search, i found a code that acomplishes the describe above, done some modifications... and it works fine on firefox... in IE8 the code doesn't run as expected... it look's like the javascript replace functions is never called... does someone have face the same problem??

the code:



//OVERRIDE NO HTML EDITOR RESPONSAVEL PELOS REPLACES

Ext.override(Ext.form.HtmlEditor, {
cleanHTML : function(html) {
var removals = [/&nbsp;/ig, /[\r\n]/g, /<(xml|style)[^>]*>.*?<\/\1>/ig, /<\/?(meta|object|span|a)[^>]*>/ig, /<\/?[A-Z0-9]*:[A-Z]*[^>]*>/ig,
/(lang|class|type|href|name|id|clear)=\"[^\"]*\"/ig, /style=(\'\'|\"\")/ig, /<![\[-].*?-*>/g, /MsoNormal/g, /<\\?\?xml[^>]*>/g, /<\/?o:p[^>]*>/g, /<\/?v:[^>]*>/g, /<\/?o:[^>]*>/g,
/<\/?st1:[^>]*>/g, /&nbsp;/g, /<\/?SPAN[^>]*>/g, /<\/?A[^>]*>/g, /<\/?BIG[^>]*>/g, /<\/?SCRIPT[^>]*>/g, /<\/?FONT[^>]*>/g, /<\/?STRONG[^>]*>/g, /<\/?H1[^>]*>/g, /<\/?H2[^>]*>/g, /<\/?H3[^>]*>/g, /<\/?H4[^>]*>/g, /<\/?H5[^>]*>/g, /<\/?H6[^>]*>/g,
/<\/?P[^>]*><\/P>/g, /<!--(.*)-->/g, /<!--(.*)>/g, /<!(.*)-->/g, /<\\?\?xml[^>]*>/g, /<\/?o:p[^>]*>/g, /<\/?v:[^>]*>/g, /<\/?o:[^>]*>/g, /<\/?st1:[^>]*>/g, /style=\"[^\"]*\"/g,
/style=\'[^\"]*\'/g, /lang=\"[^\"]*\"/g, /lang=\'[^\"]*\'/g, /class=\"[^\"]*\"/g, /class=\'[^\"]*\'/g, /type=\"[^\"]*\"/g, /type=\'[^\"]*\'/g, /href=\'#[^\"]*\'/g, /href=\"#[^\"]*\"/g,
/name=\"[^\"]*\"/g, /name=\'[^\"]*\'/g, / clear=\"all\"/g, /id=\"[^\"]*\"/g, /<span[^>]*>/g, /<\/?span[^>]*>/g, /<a[^>]*>/g, /<\/?a[^>]*>/g, /<big[^>]*>/g, /<\/?big[^>]*>/g, /<script[^>]*>/g, /<\/?script[^>]*>/g, /class=/g];//"
Ext.each(removals, function(s) {
html = html.replace(s, "");
});
// keep the divs in paragraphs
html = html.replace(/<div[^>]*>/g, "<p>"); html = html.replace(/<\/?div[^>]*>/g, "</p>");
//substitui tags h1-h6
html = html.replace(/<h1[^>]*>/g, "<p>"); html = html.replace(/<\/?h1[^>]*>/g, "</p>");
html = html.replace(/<h2[^>]*>/g, "<p>"); html = html.replace(/<\/?h2[^>]*>/g, "</p>");
html = html.replace(/<h3[^>]*>/g, "<p>"); html = html.replace(/<\/?h3[^>]*>/g, "</p>");
html = html.replace(/<h4[^>]*>/g, "<p>"); html = html.replace(/<\/?h4[^>]*>/g, "</p>");
html = html.replace(/<h5[^>]*>/g, "<p>"); html = html.replace(/<\/?h5[^>]*>/g, "</p>");
html = html.replace(/<h6[^>]*>/g, "<p>"); html = html.replace(/<\/?h6[^>]*>/g, "</p>");
return html;
}
});


//HTML EDITOR

{
xtype:'htmleditor',
id:'texto_materia',
name:'texto_materia',
border: false,
width:'100%',
height:295,
allowBlank:false,
blankText: 'Campo obrigat&oacute;rio',
anchor:'100%',
enableFontSize:false,
enableAlignments:false,
enableSourceEdit:false,
enableLists:false,
enableLinks:false,
enableFont :false,
enableColors:false,
style:'font-family:"times new roman"; font-size:12px; color:#000000;',
defaultFont:'times new roman',
listeners:{
sync: function(){Ext.getCmp('texto_materia').cleanHtml(Ext.getCmp('texto_materia').getValue());}
}
}


thanks

andregufc
17 Dec 2009, 4:42 AM
anyone?

andregufc
21 Dec 2009, 4:45 AM
up

andregufc
22 Dec 2009, 8:43 AM
nobody had the same problem?

andregufc
15 Jan 2010, 3:06 AM
THE SOLUTION:


var pasteEventoPendente=new Array();
pasteEventoPendente[0] = false;

// No evento onpaste este método é chamado
function on_editor_paste(evento, janela) {
// Variável global indicando operação de paste
pasteEventoPendente[0] = true;
}

Ext.override(Ext.form.HtmlEditor, {
cleanHtml:function(html) {
// Substitui <div>, quebra de linha e <br> por <x> - representa a tag (<br>) para facilitar a limpeza
html = html.replace(/<div[^>]*>/ig, "<x>"); html = html.replace(/<\/?div[^>]*>/ig, "");
html = html.replace(/[\r\n]/g,"<x>");
html = html.replace(/[\r]/g,"<x>");
html = html.replace(/[\n]/g,"<x>");
html = html.replace(/<br>/ig,"<x>");
html = html.replace(/<li>/ig,"<x>");
html = html.replace(/<\/li>/ig,""); // itens de lista
html = html.replace(/&nbsp;/g,"");
html = html.replace(/[\t]/g," ");

// Limpeza de xml, style, script, noscript e object
html = html.replace(/<(xml|style|script|noscript|object)[^>]*>.*?<\/\1>/ig, "");

//substitui tags h1-h6 por negrito
html = html.replace(/<h1[^>]*>/ig, "<b>"); html = html.replace(/<\/?h1[^>]*>/ig, "</b>");
html = html.replace(/<h2[^>]*>/ig, "<b>"); html = html.replace(/<\/?h2[^>]*>/ig, "</b>");
html = html.replace(/<h3[^>]*>/ig, "<b>"); html = html.replace(/<\/?h3[^>]*>/ig, "</b>");
html = html.replace(/<h4[^>]*>/ig, "<b>"); html = html.replace(/<\/?h4[^>]*>/ig, "</b>");
html = html.replace(/<h5[^>]*>/ig, "<b>"); html = html.replace(/<\/?h5[^>]*>/ig, "</b>");
html = html.replace(/<h6[^>]*>/ig, "<b>"); html = html.replace(/<\/?h6[^>]*>/ig, "</b>");
// Mantem as tags <br>

// substitui <strong> por <b>
html = html.replace(/<strong>/ig,"<b>"); html = html.replace(/<\/?strong>/ig,"</b>");
// mantem imagens de anexos
html = html.replace(/<IMG id=AN/g,"<y id=AN"); // IE está tirando as aspas
html = html.replace(/<img id=\"AN/g,"<z id=\"AN"); // outros

// Limpa as tags diferentes de <b> <i> <u> e <x>, variável auxiliar de <br>
//html = html.replace(/<((\/\w[biuxz].*?)|(\/[^biuxz\/]{1})|([^biuxz\/]{1})|(\/[^biuxz\/]{1}\w.*?)|([^biuxz\/]{1}\w.*?)|([biuxz]{1}\w.*?)|(\/[biuxz]{1}\w.*?))>/ig,"");
html = html.replace(/<((\/\w[biuxyz][^>]*)|(\/[^biuxyz\/]{1}[^>]*)|([^biuxyz\/]{1}[^>]*)|(\/[^biuxyz\/]{1}\w[^>]*)|([^biuxyz\/]{1}\w[^>]*)|([biuxyz]{1}\w[^>]*)|(\/[biuxyz]{1}\w[^>]*))>/ig,"");
// retorna a tag real da imagem
html = html.replace(/<y id=AN/g,"<IMG id=AN");
html = html.replace(/<z id=\"AN/g,"<img id=\"AN");
// Retorna a tag real de <br>
html = html.replace(/<x>([\s]*<x>){2,100}/g,"<x>");//Trata exesso de quebras de linhas
html = html.replace(/(<x>){2,}/g,"<x>");//Trata exesso de quebras de linhas
//html = html.replace(/<x> <x>/g,"<x>");//Trata exesso de quebras de linhas
html = html.replace(/<x>/ig,"<br>");
// Substitui tags <p xxxxx> por <p>
//html = html.replace(/<p [^>]>/ig,"<br>"); html = html.replace(/<\/p>/ig,"</p>");

return html;
}

});


{
xtype:'htmleditor',
id:'texto_materia',
name:'texto_materia',
border: false,
width:'100%',
height:317,
allowBlank:false,
blankText: 'Campo obrigat&oacute;rio',
value:'Digite aqui o texto da sua mat&eacute;ria',
<?php if($this->escape($this->flag) == 1){?>
readOnly: true,
<?php } ?>
anchor:'100%',
enableFontSize:false,enableAlignments:false,enableSourceEdit:false,enableLists:false,enableLinks:false,enableFont :false,enableColors:false,
style:'font-family:"times new roman"; font-size:12px; color:#000000;',
defaultFont:'times new roman',
listeners:{
// Adicionar sensor para o evento paste
'initialize': function(editor){
if(Ext.isIE || Ext.isIE7) {
// Detector do evento paste para IE
editor.iframe.contentWindow.document.body.attachEvent("onpaste",on_editor_paste);
} else {
// Detector do evento paste para Firefox
editor.iframe.contentDocument.addEventListener("paste",on_editor_paste,false);
}
},
// Seta o html
sync: function(editor, html){
if (pasteEventoPendente[0]){
editor.setValue(html);
pasteEventoPendente[0]=false;
}
return true;
}
}//Fim Listeners
}

eff844
15 Jan 2010, 3:45 AM
good , mark it