Ir para conteúdo

POWERED BY:

Arquivado

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

Leandro Vieira Pinho

escrever dentro das textarea

Por , em Javascript

Recommended Posts

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

Bom hoje tive um tempo para estudar o código, mas, pintou algumas dúvidas e gostaria de saná-las se possível, tipo:

 

qual a necessidade desta linha:

var uagent = navigator.userAgent.toLowerCase();?

 

Percebi no código que temos duas versões para inserir a tag no texto selecionado, sendo uma para os navegadores menor ou igual a versão 4, ie e win e outra para o Firefox.

 

Esta é a primeira versão:

 

if ((ua_vers >= 4) && is_ie && is_win) {// pegando o texto selecionadovar meuTexto = document.selection.createRange().text;//texto originalvar textoOriginal = document.form1.Texto.value;//novo textovar meuNTexto = "";var textoFormatado = "";var meuNTextoI = "";var meuNTextoF = "";// verifica se tem algo selecionadoif (meuTexto.length == 0){alert ("Selecione algo");}else{//aplica a formatacao escolhidameuNTextoI = "[" + What + "]";meuNTextoF = "[/" + What + "]";//texto finalmeuNTexto = meuNTextoI + meuTexto + meuNTextoF;//substitui o texto antigo com o novo, formatadotextoFormatado = (textoOriginal.replace(meuTexto, meuNTexto));document.form1.Texto.value = textoFormatado;}}
Consegui compreênde-la.

 

Esta é a segunda:

 

//FIREFOXelse if (obj_ta.selectionEnd) {var ss = obj_ta.selectionStart;var st = obj_ta.scrollTop;var es = obj_ta.selectionEnd;if (es <= 2) { es = obj_ta.textLength;}var start  = (obj_ta.value).substring(0, ss);var middle = (obj_ta.value).substring(ss, es);var end    = (obj_ta.value).substring(es, obj_ta.textLength); if (obj_ta.selectionEnd - obj_ta.selectionStart > 0) { middle = "[" + What + "]" + middle + "[/" + What + "]";}  obj_ta.value = start + middle + end; var cpos = ss + (middle.length);obj_ta.selectionStart = cpos;obj_ta.selectionEnd   = cpos;obj_ta.scrollTop      = st;}}
Não consegui compreender, achei muito confusa, alguém poderia me explicar?

 

Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alex Hiroshi    7

Alex Hiroshi
Postado

Eu só li uma parte do que você postou...

mas uma sintaxe

 

campo.selectionStart;

campo.selectionEnd;

 

o primeiro pega o incio da palavra ou frase selecionada, o segundo o fim.. então, com um exemplo basico...

 

// campo é o caminho para a textareavar inicio = campo.selectionStart;var fim = campo.selectionEnd;var text_selecionado = campo.value.substring(inicio,fim);alert(text_selecionado);
Ele retorna um alert() com o texto que foi selecionado no campo..

Isso não funciona direito no IE, apenas no firefox..

Como o firefox não reconhece o document.seleciont.createRange(), é só verificar 

if(document.selection) {// navegador aceita, então use o document.selectoin.createRange();}else {// Não aceita, então use o selectionStart e selectionEnd}

 

E a linha do toLowerCase().. é só para deixar em minusculo o nome, versão do navegador...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

Este tópico está contribuindo bastante para que eu consiga entender e desenvolver meu Rich Text Editor.

 

Seria muito prático pegar um script pronto na net e continuar sem saber os procedimentos necessário para realizar tal tarefa, mas, gosto de pegá-los para estudá-los e consequentemente aprender um pouco mais.

 

Vou postar o script que desenvolvi com base nas respostas obtida aqui e um bug já encontrado http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Página com o script e o form para uso:

 

<!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) 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  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>
Explicando o bug.

 

Se a textarea 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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

DackAle    0

DackAle
Postado

Hmmmm eu desenvolvi um parecidoe meu maior problema tambem é isso do REPLACE...Rava pensando, existe uma forma de selecionar por caractere apenas na hora de aplicar o replace ?Exemplo do caractere 45 ao 60 por exemploOu talvez selecionar uma parte maior na hora de aplicar o replace...Acho que o diferencial do outro "editores" que achei já estão rolandoCross-BrowserAplicar TAG no Texto selecionadoEu fiz a parte visual do Editor e ficou bem legal (Meio que plagiei o BabooForum husauhashus)Se quiserem posto, para tentarmos fechar esse Editor ;P

Compartilhar este post

Link para o post
Compartilhar em outros sites

DackAle    0

DackAle
Postado

A sim, uma coisa diferente que existe, é que no meu se você não selecionar o texto, ele insere com um por exemplo[ b ] insira o texto [ / b] o que não obriga o usuário a selecionar algo, igual no forum....

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