Foros del Web - Ver Mensaje Individual

patilanz · #6 (**permalink**) 26/02/2013, 11:30

Cita:

Iniciado por emprear

Convengamos primero que crear tu propio editor no es muy sencillo

Primero una aclaración, un textarea trata al código html como texto, así que no tendrías que utilizar necesariamente entidades html, salvo que si no lo hacés no te validaría como xhtml, por lo tanto si usas html sin convertirlo a entidades en el textarea, deberías utilizar el doctype de html5, con lo cual te validaría.

Con respecto a colorear un email, puede resolverse facilmente con un split() de javascript, claro que un editor supuestamente puede contener cosas bastante más complejas, por lo habría que utilizar métodos más complejos, expresiones regulares, etc.

Te dejo una demo, pero cuidado que el coloreado solo sirve para emails del tipo
[email protected], si hubiese más puntos en el email, p. ej [email protected], ya no te serviría

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function pasarAlDiv(ta){
var v = document.getElementById(ta).value;
document.getElementById('resultados').innerHTML =v;
}
 
function colorear(){
var v = document.getElementById('email').value;
var a = v.split('@');
var b = a[1].split('.');
document.getElementById('resultados').innerHTML ="<span style='color: red'>" + a[0] + "</span>@<span style='color: green'>" + b[0] +"</span>.<span style='color: navy'>"+ b[1] +"</span>";
}
//]]>
</script>
</head>
<body>
<p>Editor 1</p>
<textarea cols="60" rows="3" id="editor1">
&lt;div style=&quot;background: lime; width: 100px; height: 100px;&quot;&gt;
Contenido de div en textarea
&lt;/div&gt;
</textarea>
<button onclick="pasarAlDiv('editor1')">Pasar al div resultados</button>
<p>Editor 2</p>
<textarea cols="60" rows="3" id="editor2">
<div style="background: orange; width: 100px; height: 100px;">
Contenido de div en textarea
</div>
</textarea>
<button onclick="pasarAlDiv('editor2')">Pasar al div resultados</button>
<p>Colorear</p>
<form>
<input type="text" value="[email protected]" id="email" size="50" />
<input type="button" onclick="colorear();" value="Colorear" />
</form>
<p>Div resultados</p>
<div id="resultados"></div>
</body>
</html>

Notá que un textarea tiene entidades y el otro no

Saludos

Gracias por tu respuesta pero lo que me decís ya lo se. Lo que necesito es que se coloree dentro del input o textarea y no en una div. Y no he dicho que es fácil hacer lo que pido, solo si me podéis orientar y yo lo intentare hacer, no tengo problema en hacer algo mas complejo.

Saludos