Cita:
Iniciado por furoya 
Ya entiendo lo que es m, no creo que me sirva. ¿Y por qué C0 al FF?
la pregunta es ambigua. esperaré a que la reaformules para responder
algo en tiempo real o wysiwyg
Código:
<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
#marco {
border: 1px grey solid;
width: 400px;
height: 200px;
overflow: auto;
counter-reset: numero_link;
}
#marco span.vinculo > a, #marco div#saltonumeracion > a {
color: red;
text-decoration: none;
}
#marco div#saltonumeracion > a[target]:before {
content: counter(numero_link) '. ';
counter-increment: numero_link;
color: blue;
font-weight: bold;
}
#txtarea {
display:none;
}
</style>
<script type="text/javascript">
function fnc(evt, elem){
if (evt.keyCode == 32) {
var reg = /((www)(\.)([\w-_\/\.]+))(?![\/">\w\.]|[<\/a>])/i;
var palabras = elem.innerHTML.split(/(\s+)/);
for (var i = 0; i <= palabras.length-1; i++) {
if (reg.test(palabras[i])) {
elem.innerHTML = elem.innerHTML.replace(reg, '<span class="vinculo"><a id="$1'+i+'" href="http://$1/">$1</a></span>');
}
}
}
}
function editable(bol) {
var elem = document.getElementById('marco');
if (!bol) {
var controlaidiotas = elem.getElementsByTagName('span');
if (controlaidiotas.length == 0) {return;} // no se han insertado vinculos
var div = elem.getElementsByTagName('div');
var span = elem.querySelectorAll('.vinculo');
for(var i = 0; i < span.length; i++) {
// se crea el salto de línea
var nuevoNodo = document.createElement('div');
nuevoNodo.setAttribute('id', 'saltonumeracion');
nuevoNodo.appendChild(span[i].firstChild);
elem.replaceChild(nuevoNodo, span[i]); // replaceChild sólo reemplaza hijos directos
// se crea la numeración
div[i].firstChild.setAttribute('target', '_blank');
}
elem.contentEditable = 'false';
} else {
var controlaidiotas = elem.getElementsByTagName('div');
if (controlaidiotas.length == 0) {return;} // no se han insertado vinculos
var span = elem.getElementsByTagName('span');
var div = elem.querySelectorAll('#saltonumeracion');
for(var i = 0; i < div.length; i++) {
// se elimina el salto de línea
var nuevoNodo = document.createElement('span');
nuevoNodo.setAttribute('class', 'vinculo');
nuevoNodo.appendChild(div[i].firstChild);
elem.replaceChild(nuevoNodo, div[i]);
// se elimina la numeración
span[i].firstChild.removeAttribute('target');
}
elem.contentEditable = 'true';
}
}
</script>
</head>
<body>
<form id="f" name="f" method="post" action="">
editar <input type="checkbox" id="chk" checked="checked" onclick="editable(this.checked)" />
<div id="marco" contenteditable="true" onkeyup="fnc(event, this)"></div>
</form>
</body>
</html>
la numeración de los enlaces se hace con css (selector de atributo, :before, content y counter-increment) con lo que se puede volcar el contenido del div editable sobre un textarea y ser enviado
es cross-browser?? no, ie tiene un problema con que un elemento en línea sea contenedor de otro elemento en línea. no es un problema es sólo que lo trata como lo que es un vinculo. la línea de código a este respecto es
Cita: elem.innerHTML = elem.innerHTML.replace(reg, '<span class="vinculo"><a id="$1'+i+'" href="http://$1/">$1</a></span>');
el comportamiento de los demás navegadores es relativamente aceptable. cuando se escribe una url el cursor vuelve a la posición 0 o a la posición del último reemplazo
se puede usar saltos de línea?? no, el método replaceChild() sólo reemplaza los descendientes directos. cuando se inserta un salto de línea, en el div, se representa con
. si se continua escribiendo, el texto quedará envuelto en ese div
Cita: <div>se ha producido un salto de línea</div>
con lo que su contenido no es descendiente directo del bloque contenedor. en este caso #marco
hay bastante mas observaciones que se pueden hacer sobre este código, por ejemplo; porqué uso querySelectorAll, porqué no uso insertBefore() y creo una función que emule insertAfter, porqué no uso insertAdjacentHTML(), etc... pero ahora no me apetece. si alguien está interesado que pregunte