Foros del Web » Programando para Internet » Javascript »

Insertar texto junto al cursor en un div contenteditable

Estas en el tema de Insertar texto junto al cursor en un div contenteditable en el foro de Javascript en Foros del Web. Hola a todos. Llevo todo el día dandole vueltas a este problema y no soy capaz de encontrar la solución. Resulta que tengo un div ...
  #1 (permalink)  
Antiguo 24/04/2010, 10:46
oom
 
Fecha de Ingreso: septiembre-2003
Ubicación: Santiago de Compostela
Mensajes: 61
Antigüedad: 21 años, 3 meses
Puntos: 0
Insertar texto junto al cursor en un div contenteditable

Hola a todos.
Llevo todo el día dandole vueltas a este problema y no soy capaz de encontrar la solución.
Resulta que tengo un div con la propiedad contenteditable=true para que se pueda insertar texto. Me sustaría que ese div funcionase casi todo con texto plano, como si fuese un textarea, pero como necesito que se puedan utilizar los links y resaltar ciertos textos, no puedo utilizar un textarea directamente.
El problema viene cuando quiero evitar que el navegador me meta caracteres que no quiero, como los <br> al pulsar enter y también quería que se pudieran insertar tabulaciones directamente. Mi intención era crear una función que detectara cuando pulso ciertas teclas (como enter y tabulación) e insertara el texto en el mismo punto donde está el cursor pero no soy capaz de detectar la posición del cursor. La mayoría de cosas que probé funcionan para los textareas pero no para divs editables (range, selectionStart, etc).

Alguien me puede hechar una mano, plis?
  #2 (permalink)  
Antiguo 24/04/2010, 12:26
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 6 meses
Puntos: 834
Respuesta: Insertar texto junto al cursor en un div contenteditable

No sé si esto es lo que buscás, pero quizá te de alguna idea (funciona con la tecla enter):
Código PHP:
<!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=utf-8" />
<
title>Documento sin t&#237;tulo</title>
<script>
function 
inHTML(editor,u){ 
    var 
u,u2
        try{ 
            
document.execCommand("inserthtml",false,u); 
        }catch(
e){ 
            try{ 
                
editor.focus(); 
                
u2=document.selection.createRange(); 
                
u2.pasteHTML(u); 
            }catch(
E){ 
                
alert('nop'); 
            } 
        }
        return 
false;

document.onkeydown=function(e){
    var 
evt=|| event;
    var 
t=evt.wich || evt.keyCode;
    if(
t==13){
        return 
inHTML(document.getElementById('pepito'),'<span style="color:red">no uses enter</span>');
    }
}
</script>
</head>

<body>
<div id="pepito" contenteditable="true">esto es contenido editable</div>
</body>
</html> 
Edito: no funciona en explorer 7 ó -. Para mayor compatibilidad deberías usar iframe: http://www.disegnocentell.com.ar/notas2.php?id=180

Última edición por Panino5001; 24/04/2010 a las 12:32
  #3 (permalink)  
Antiguo 24/04/2010, 13:54
oom
 
Fecha de Ingreso: septiembre-2003
Ubicación: Santiago de Compostela
Mensajes: 61
Antigüedad: 21 años, 3 meses
Puntos: 0
Respuesta: Insertar texto junto al cursor en un div contenteditable

Muchas gracias Panino. Lo cierto es que funciona muy bien. Seguiré explorando por este camino. Por cierto, ¿por que dices lo de usar iframe? ¿en qué es más compatible?
  #4 (permalink)  
Antiguo 24/04/2010, 16:58
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 6 meses
Puntos: 834
Respuesta: Insertar texto junto al cursor en un div contenteditable

Lo decía por un test que hice en explorer 6 y 7. Pero no, olvidate: estaba probando con ietester y el problema es de la herramienta, que no reconoce algunos keycodes, como el del enter. En resumen, usá lo que más te convenga, pero recordá que Firefox 2 no reconoce el atributo conteenteditable (empezó a reconocerlo a partir de la versión 3).

Etiquetas: cursor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:30.