Formato texto donde esté el cursor en editor de texto

ese_perro · #1 (**permalink**) 27/08/2009, 04:16

Buenos días a todos,

Llevo leyendo este foro mucho tiempo ya, y me ha ayudado en multitud de ocasiones. Pero ahora tengo un problema que no he encontrado, motivado también porque soy bastante profano en javascript y html, y me he visto obligado a registrarme, aunque ya aprovecharé y seguiré rondando por aquí, aunque en vez de manera anónima lo haré bajo un nick.

Estoy haciendo un editor de texto utilizando un div editable, y tiene sus funciones negrita, cursiva, subrayado, alieando, y demás (la mayoría sencillitas).
Funciona todo estupendamente, pero tengo que conseguir un detalle que he buscado y no he encontrado: si el cursor (la barrita que parpadea, no el puntero de ratón) está en una parte del texto que va a escribir en negrita, se debería sombrear el botón de negrita. Y lo mismo con el alineado y con todo. Basicamente, es lo que hace el famoso Word.

¿Hay alguna forma de saber qué formato tendría el texto que se introduciría y sombrear los botones según el caso? ¿O es impepinable averiguar la posición y calcular los tags a la izquierda de la posición para saber el formato?

Espero que se me entienda la pregunta, que ya dije que soy bastante profano

Adler · #2 (**permalink**) 27/08/2009, 07:16

Hola

Mira a ver si esto es lo que buscas

Código javascript:

Ver original<html>
<head>
<style type="text/css">
#tabla td {background-color:#FFFFFF;}
</style>
<script type="text/javascript">
window.onload = function () {
var elementos = document.getElementById("tabla").getElementsByTagName("td");
    for (var i=0;i < elementos.length; i++)  { 
        
        elementos[i].onclick = Celda;
        elementos[i].onmouseover = Celda;
        elementos[i].onmouseout = Celda;
            
        }
 
}
 
function Celda(evento) {
var evento = evento || window.event;
    switch(evento.type) {
case 'mouseover':
    //this.style.backgroundColor = ((this.style.backgroundColor == '#ff0000') || (this.style.backgroundColor == 'rgb(255, 0, 0)'))   ? '#FFFF00' : '#CCFF66' ; 
//alert(this.style.backgroundColor);
    break;
 
 
case 'mouseout':
    this.style.backgroundColor = ((this.style.backgroundColor == '#ccffcc') || (this.style.backgroundColor == 'rgb(204, 255, 102)')) ? '#FFFFFF' : '#FF0000'; 
//alert(this.style.backgroundColor);
    break;
 
 
case 'click':
    this.style.backgroundColor = ((this.style.backgroundColor ==  '#ccffcc') || (this.style.backgroundColor == 'rgb(204, 255, 102)')) ? '#FF0000' : '#CCFF66';
//alert(this.style.backgroundColor);
    break;
  }
}
 
 
</script>
</head>
<body>
<table border="1" id="tabla">
<tr>
<td>celda1</td>
<td>celda2</td>
<td>celda3</td>
<td>celda4</td>
<td>celda5</td>
<td>celda6</td>
<td>celda7</td>
</tr>
</table>
</body>
</html>

Suerte

ese_perro · #3 (**permalink**) 27/08/2009, 07:50

Ante todo, muchas gracias por responder.

Mi "problema" viene dado porque soy incapaz de controlar qué botón se debe quedar marcado o desmarcado cuando el formato cambia sin pulsar los botones de edición.

Esto es, tengo el siguiente texto:

"Colorín colorado, este cuento se ha acabado"

Si selecciono la palabra 'colorado' y la marco en negrita, el texto visualmente sería

"Colorín colorado, este cuento se ha acabado".

Lo que yo quiero es, si el cursor estuviera en

"Colorín colorad|o, este cuento se ha acabado" (la barra vertical)

estuviera sombreado el botón de la acción de marcarlo en negrita. Si con las flechitas de dirección o con el propio ratón desplazo el cursor

"Colorín colorado, este cu|ento se ha acabado"

controlar que estoy fuera de la parte del texto en negrita y por tanto desmarcar automáticamente el botón de negrita. Me gustaría saber si esto lo puedo conseguir por algún atributo del campo de texto, del cursor; o tengo que calcular la posición del cursor (barrita vertical) en el texto y ver por los tags que tenga a su izquierda si tengo que dejar marcado el botón o no. O sea, mi problema no es cómo cambiar el color del botón, si no cuándo cambiarlo.

Espero haberme explicado.

Adler · #4 (**permalink**) 27/08/2009, 12:11

Hola

Ahora te he entendido. No creo que se pueda hacer con javascript. Tampoco se si con otro lenguaje se podría. De cualquier modo ¿no te parece que es buscarle tres pies al gato?

Suerte