Heaven's Code: Editando texto com JavaScript

terça-feira, 30 de janeiro de 2007

Editando texto com JavaScript

Há alguns dias atrás vi um questionamento no forumweb sobre uma forma de fazer um editor de texto (HTML) igual ao do próprio forumweb. Sugeri o uso do RTE - http://www.kevinroth.com/rte/ -, que é um bom editor HTML para ser inserido em páginas WEB, para edição de textos. Hoje vi a resposta dele e ele disse não querer algo tão complexo como o RTE. Então lembrei de um código que vi uma vez... Era um simples "textarea" que possuia alguns botões de edição como negrito, italico, etc. Resolvi então fazer algo parecido pro brother. É uma solução super simples, mas interessante em casos como esse. Segue o código:

function funcao(opcao)
{
var msg, texto, texto_aux, code_1, code_2;
switch (opcao)
{
case "N":
msg = "Digite o texto que ficará em negrito: ";
code_1 = "<b>";
code_2 = "</b>";
break;
case "I":
msg = "Digite o texto que ficará em itálico: ";
code_1 = "<i>";
code_2 = "</i>";
break;
case "S":
msg = "Digite o texto que ficará sublinhado: ";
code_1 = "<u>";
code_2 = "</u>";
break;
}
texto = window.prompt(msg, "");
texto_aux = code_1 + texto + code_2;

document.getElementById("txtCampo").value = document.getElementById("txtCampo").value + texto_aux;

document.getElementById("txtCampo").focus();
}

</script>

</head>
<body>

<img src="img/negrito.jpg" onClick="funcao('N')">
<img src="img/italico.jpg" onClick="funcao('I')">
<img src="img/sublinhado.jpg" onClick="funcao('S')">

<br>

<textarea name="txtCampo" id="txtCampo" cols="40" rows="5"></textarea>

</body>
</html>

Utilizei algumas imagens para dar a ideia de edição. Ao clicar nessas imagens é acionado uma função javascript que abre um "prompt" que solicita ao usuário escrever o texto que deseja colocar em negrito, italico ou sublinhado. Ao inserir o texto a função joga no "textarea" o texto digitado, com as tags HTML para negrito, itálico ou sublinhado.

Nenhum comentário:

Postar um comentário