Results 1 to 6 of 6

Thread: HtmlEditor - Replace text on paste

  1. #1
    Sencha User
    Join Date
    Jan 2008
    Posts
    10

    Default HtmlEditor - Replace text on paste

    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:

    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

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Posts
    10

    Default

    anyone?

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Posts
    10

    Question

    up

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Posts
    10

    Default

    nobody had the same problem?

  5. #5
    Sencha User
    Join Date
    Jan 2008
    Posts
    10

    Thumbs up

    THE SOLUTION:

    Code:
    var pasteEventoPendente=new Array(); 
    pasteEventoPendente[0] = false;
    
    // No evento onpaste este mtodo  chamado
    function on_editor_paste(evento, janela)	{
    	// Varivel global indicando operao 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>, varivel 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	
    }

  6. #6

    Default

    good , mark it

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •