Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Leandro Vieira Pinho

Já viu um Bug igual a esse?

Por , em Javascript

Recommended Posts

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

Me deparei com um bug que nunca vi igual, vejam:

 

Explicando o bug.

 

Ocorre em uma textarea, por exemplo se ela conter duas palavras semelhantes, e selecionar-mos a última para aplicar a tag, o script adiciona na primeira.

 

Tipo assim, temos estas duas frases:

 

 

O rato roeu a roupa do rei de roma.

O rato roeu a roupa do rei de roma.

Se quisermos aplicar um negrito na palavra roupa da segunda frase, o script adiciona na primeira.

 

Veja o a página com o script:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Editor de HTML</title><script type="text/javascript">// Função para inserir tag HTML no texto selecionadofunction InsertTagHTML(tag_open,tag_close) {// Detecta o primeiro form na página e a textara (editor_texto) nelavar richtext = document.forms[0].editor_texto;// Variável que armazena o texto originalvar texto_original = richtext.value;// Detecta os browsers que suportam o selection.createRange() como Internet Explorerif (document.selection) { // Variável que armazena o texto selecionado var texto_selecionado = document.selection.createRange().text; // Variável que cria o novo texto (este será o texto formatado). var texto_novo = ""; // Variável que armazenará o texto formatado var texto_formatado = "";  // Verificando se foi feita alguma seleção if (texto_selecionado.length == 0) {  alert("Por favor, selecione o texto para formatá-lo.\nObrigado."); // Início do processo de formatação do texto } else {  // Complementando a variável - novo_texto = "";  novo_texto = tag_open + texto_selecionado + tag_close;  // Complementando a variável - texto_formatado  texto_formatado = (texto_original.replace(texto_selecionado, novo_texto));  // UFA! Insere o texto formatdo  document.forms[0].editor_texto.value = texto_formatado; }} // Fechando a verificação do document.selecion// Detecta os browsers que NÃO suportam o selection.createRange() como o Firefoxelse { // Variáveis que pegam o texto selecionado // Pega o início do texto var inicio_texto = richtext.selectionStart; // Pega o termínio do texto var termino_texto = richtext.selectionEnd; // Pega o texto selecionado por completo var texto_selecionado = richtext.value.substring(inicio_texto,termino_texto); // Verificando se foi feita alguma seleção if (texto_selecionado.length == 0) {  alert("Por favor, selecione o texto para formatá-lo.\nObrigado."); // Início do processo de formatação do texto } else { // Variável que cria o novo texto (este será o texto formatado). var texto_novo = ""; // Variável que armazenará o texto formatado var texto_formatado = ""; // Complementando a variável - novo_texto = ""; novo_texto = tag_open + texto_selecionado + tag_close; // Complementando a variável - texto_formatado texto_formatado = (texto_original.replace(texto_selecionado, novo_texto)); document.forms[0].editor_texto.value = texto_formatado; }}}</script></head><body><h1>Editor HTML</h1><form id="frm_editor" method="post" action="#"><p> <input type="button" name="negrito" id="negrito" value="Negrito" onclick="InsertTagHTML('<strong>','</strong>');" /> <input type="button" name="italico" id="itaico" value="Itálico" onclick="InsertTagHTML('<em>','</em>');" /> <input type="button" name="paragrafo" id="paragrafo" value="Parágrafo" onclick="InsertTagHTML('<p>','</p>');" /></p><p> <textarea name="editor_texto" id="editor_texto" cols="70" rows="18"></textarea></p></form></body></html>
Testem e se puder ajudar para resolver, ficarei agradecido.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crystian    0

Crystian
Postado

Leandro, isso não é um bug do navegador, mas sim da forma q esta sendo feita a função...você está pegando o texto q esta selecionado através do substring e depois tu faz um replace no texto todo. O replace vai procurar a string q você passou no primeiro parâmetro e como existe uma string igual antes, ele faz a substituição e pára. você tem que fazer de uma forma diferente... pegar o selectionStar e acrescentar naquela posição o <STRONG> e no selectionEnd o </STRONG> (exemplo para negrito).Tenta mudar e qualquer coisa posta ae...Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crystian    0

Crystian
Postado

Leandro, sinceramente não gosto de passar script pronto, ou arrumar scripts pq sei q o pessoal acaba pegando o script e usando apenas, sem nem ao menos entender um pouco o código, só vou postar isso pra ti pq acredito q você seja diferente e mais empenhado.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Editor de HTML</title>

<script type="text/javascript">

// Função para inserir tag HTML no texto selecionado

function InsertTagHTML(tag_open,tag_close) {

    // Detecta o primeiro form na página e a textara (editor_texto) nela

    var richtext = document.forms[0].editor_texto;

    // Variável que armazena o texto original

    var texto_original = richtext.value;

 

    // Detecta os browsers que suportam o selection.createRange() como Internet Explorer

    if (document.selection) {

        // Variável que armazena o texto selecionado

        var texto_selecionado = document.selection.createRange().text;

        // Variável que cria o novo texto (este será o texto formatado).

        var texto_novo = "";

        // Variável que armazenará o texto formatado

        var texto_formatado = "";

 

        // Verificando se foi feita alguma seleção

        if (texto_selecionado.length == 0) {

            alert("Por favor, selecione o texto para formatá-lo.\nObrigado.");

            // Início do processo de formatação do texto

    } else {

            // Complementando a variável - novo_texto = "";

            novo_texto = tag_open + texto_selecionado + tag_close;

            // Complementando a variável - texto_formatado

            texto_formatado = (texto_original.replace(texto_selecionado, novo_texto));

            // UFA! Insere o texto formatdo

            document.forms[0].editor_texto.value = texto_formatado;

    }

    } // Fechando a verificação do document.selecion

 

    // Detecta os browsers que NÃO suportam o selection.createRange() como o Firefox

    else {

        // Variáveis que pegam o texto selecionado

        // Pega o início do texto

        var inicio_texto = richtext.selectionStart;

        // Pega o termínio do texto

        var termino_texto = richtext.selectionEnd;

        // Pega o texto selecionado por completo

 

        //Essa linha esta pegando o texto, para usá-lo depois, aqui está o equívoco.

        // Se você pegar o texto selecionado e tentar fazer um replace depois, ele vai pegar a primeira

        //ocorrência daquele texto(ou palavra) em todo o texto.

        //var texto_selecionado = richtext.value.substring(inicio_texto,termino_texto);

 

        //Como deve ser(Ou uma forma de se fazer, existem outras)

        var texto_selecionado = richtext.value.substring(0, inicio_texto)+tag_open;

        texto_selecionado += richtext.value.substring(inicio_texto, termino_texto)+tag_close;

        texto_selecionado += richtext.value.substring(termino_texto);

 

        // Verificando se foi feita alguma seleção

        if (texto_selecionado.length == 0) {

            alert("Por favor, selecione o texto para formatá-lo.\nObrigado.");

            // Início do processo de formatação do texto

        } else {

            // Aqui muda um pouco...

            // Variável que cria o novo texto (este será o texto formatado).

            // var texto_novo = "";

            // Variável que armazenará o texto formatado

            // var texto_formatado = "";

            // Complementando a variável - novo_texto = "";

            // novo_texto = tag_open + texto_selecionado + tag_close;

            // Complementando a variável - texto_formatado

            // texto_formatado = (texto_original.replace(texto_selecionado, novo_texto));

            document.forms[0].editor_texto.value = texto_selecionado;

        }

    }

}

</script>

</head>

 

<body>

 

<h1>Editor HTML</h1>

 

<form id="frm_editor" method="post" action="#">

<p>

<input type="button" name="negrito" id="negrito" value="Negrito" onclick="InsertTagHTML('<strong>','</strong>');" />

<input type="button" name="italico" id="itaico" value="Itálico" onclick="InsertTagHTML('<em>','</em>');" />

<input type="button" name="paragrafo" id="paragrafo" value="Parágrafo" onclick="InsertTagHTML('<p>','</p>');" />

</p>

<p>

<textarea name="editor_texto" id="editor_texto" cols="70" rows="18"></textarea>

</p>

</form>

 

</body>

</html>

Pro firefox(Mozilla e Netscape) funciona, só não funciona no IE, pois não tenho como testar no IE, dae nem mexi, vê se tu consegue, qualquer coisa posta ae, q tento te ajudar.

 

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

Obrigado Crystian,Realmente não gosto de pegar scripts prontos, gosto de estar estudando os mesmo e ao mesmo tempo aprender um pouco mais, é assim que tenha feito e aprendido bastante.Mas como não tenho grandes conhecimentos, às vezes peno um pouco e recorro ao fórum.No Firefox funcionou perfeitamente, já no IE(ca) não, vou mexer nele agora para tentar arruamar para o ie, e retorno o resultado.Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

Ops Consegui!

 

Para o IE, assim:

 

var texto_selecionado = document.selection.createRange().text;var novo_texto_selecionado = document.selection.createRange();novo_texto_selecionado.text = tag_open + texto_selecionado + tag_close;

Agora com isso queria entender o seguinte:

 

Por que preciso pegar o texto selecionado duas vezes? Encontrei o exemplo acima após uma "googada" mas não compreendi muito bem.

 

 

Aqui está o código completo para quem quiser usar:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Editor HTML</title><script type="text/javascript">function InsertTagHTML(tag_open,tag_close) { // Função para inserir tag HTML no texto selecionado      var richtext = document.forms[0].editor_texto; // Detecta o primeiro form na página e a textara (editor_texto) nela    var texto_original = richtext.value; // Variável que armazena o texto original    if (document.selection) { // Detecta os browsers que suportam o selection.createRange() como o Internet Explorer        var texto_selecionado = document.selection.createRange().text; // Variável que armazena o texto selecionado	var novo_texto_selecionado = document.selection.createRange();	novo_texto_selecionado.text = tag_open + texto_selecionado + tag_close;    } else {// Fechando a verificação do document.selecion    // Detecta os browsers que NÃO suportam o selection.createRange() como o Firefox            // Variáveis que pegam o texto selecionado            // Pega o início do texto        var inicio_texto = richtext.selectionStart;        // Pega o termínio do texto        var termino_texto = richtext.selectionEnd;        //Como deve ser(Ou uma forma de se fazer, existem outras)        var texto_selecionado = richtext.value.substring(0, inicio_texto)+tag_open;        texto_selecionado += richtext.value.substring(inicio_texto, termino_texto)+tag_close;        texto_selecionado += richtext.value.substring(termino_texto);        document.forms[0].editor_texto.value = texto_selecionado; // Adiciona o texto selecionado.     } // Fechando do else do document.selecion}</script></head><body><h1>Editor HTML</h1><form id="frm_editor" name="frm_editor" method="post" action="#"><p>	<input type="button" name="negrito" id="negrito" value="Negrito" onclick="InsertTagHTML('<strong>','</strong>');" />	<input type="button" name="italico" id="itaico" value="Itálico" onclick="InsertTagHTML('<em>','</em>');" />	<input type="button" name="paragrafo" id="paragrafo" value="Parágrafo" onclick="InsertTagHTML('<p>','</p>');" /></p><p>	<textarea name="editor_texto" id="editor_texto" cols="70" rows="18"></textarea></p></form></body></html>
PS. Poxa ta vendo só, ficou muito mais limpo e fácil de entender do que os outros que tem pela net. Só falta agora o DesignMode

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito