11

Una pequeña funcionalidad que permite cambiar el color de palabra HTML especifica, pero actualmente solo aplica un solo color y existe un pequeña atascamiento del cursor al momento de escribir no fluye normalmente, pienso que se puede evitar crear tantos case, si algunas palabras HTML van a tener el mismo color, pienso que puede cambiar por otra alternativa, por decir

[P,DIV,SPAN,FONT];

Esas palabras van a tener un color tomate

Y así ir jugando con los colores asignables por decir lo siguiente:

[BR,H1,H2,H3];

Aplicar un color anaranjado.

¿Cómo hacer que la funcionalidad de cambio de color funcione adecuadamente?

$("#editor").on("keydown keyup", function(e){
    if (e.keyCode == 32){
        var text = $(this).text().replace(/[\s]+/g, " ").trim();
        var word = text.split(" ");
        var newHTML = "";

        $.each(word, function(index, value){
            switch(value.toUpperCase()){
                case "DIV":
                case "SPAN":
                case "P":
                    newHTML += "<span class='statement'>" + value + "&nbsp;</span>";
                    break;
                default: 
                    newHTML += "<span class='other'>" + value + "&nbsp;</span>";
            }
        });
      	$(this).html(newHTML);
         
    }
});
#editor {
    width: 400px;
    height: 100px;
    padding: 10px;
    background-color: #444;
    color: white;
    font-size: 14px;
    font-family: monospace;
}
  
.statement {
    color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editor" contenteditable="true"></div>

1
  • 1
    Debe tardar tanto porque estás regenerando dos veces todo el html del texto cada vez que pulsas una tecla: una vez al pulsar la tecla(keydown) y otra al soltarla(keyup). Además de que con uno solo de estos eventos sería suficiente, habría que optimizarlo para que no rehiciera todo el html de todo el texto sino solo aquel de la palabra en la que estés el 21 sep. 2018 a las 6:03

3 respuestas 3

10

Para este caso podría utilizar arrays de elementos que contenga los tags los cuáles evaluará para aplicar un color determinado. y utilizar includes() para saber si el elemento actual existe en el array antes declarado.

Además haría falta una función para manipular el focus del contenteditable, utilizando Rangos (función comentada en el código)

Su código con las modificaciones mencionadas

$(function() {
	let colorTomate = ['P','DIV','SPAN','FONT'];
	let colorAnaranjado =['BR','H1','H2','H3'];
	$("#editor").on("keydown", function(e){
		let key = e.which || e.charCode || e.keyCode;
	    if (key == 32){
	        let text = $(this).text().replace(/[\s]+/g, " ").trim();
	        let words = text.split(" ");
	        let newHTML = "";
	        $.each(words, function(index, value){
	        	if(colorTomate.includes(value.toUpperCase())){
	        		newHTML += "<span class='color2'>" + value + "&nbsp;</span>";
	        	}
	        	else if(colorAnaranjado.includes(value.toUpperCase())){
	        		newHTML += "<span class='statement'>" + value + "&nbsp;</span>";
	        	}
	        	else{
	        		newHTML+= value + "&nbsp;";
	        	}
	        });
	      	$(this).html(newHTML); 
	      	setFocusEndElement(this);

	    }

	});

	function setFocusEndElement(element){
		if(document.createRange)
	    {
	    	// creamos el rango
	        let rango = document.createRange();
	        //Seleccionamos el contenido del elemento, div
	        // para este caso, pasado como parámetro 
	        rango.selectNodeContents(element);
	        // El paso más importante, collapse colocar
	        // el cursor al final del range (fragmento de nodos o texto) , el div 
	        // en este caso
	        rango.collapse(false);
	        //Remover el foco actual en la ventana
	        //obtenemos la selección
	        seleccionaFinal = window.getSelection();
	        //para luego remover los rangos de selección
	        seleccionaFinal.removeAllRanges();
	        // luego añadimos el rango donde queremos que el focus se posicione
	        // que será al final del contenido
	        seleccionaFinal.addRange(rango);
	    }  
	}
});
#editor {
    width: 400px;
    height: 100px;
    padding: 10px;
    background-color: #444;
    color: white;
    font-size: 14px;
    font-family: monospace;
}

.color2 {
    color: yellow;
}

.statement {
    color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editor" contenteditable="true"></div>

Funcionará , pero el proceso no es óptimo ya que está procesando todo el contenido nuevamente cada vez que se presione la tecla de espacio. Para lo cuál lo recomendable sería no tocar los componentes ya procesados y solo trabajar en el actual. Para esto emplearíamos la función split a través de la entidad &nbsp; (se modificaría la inserción de esta entidad en los if else)

Posible código explicado (A Mejorar)

$(function() {
	let colorTomate = ['P','DIV','SPAN','FONT'];
	let colorAnaranjado =['BR','H1','H2','H3'];
	$("#editor").on("keydown", function(e){
		let key = e.which || e.charCode || e.keyCode;
	    if (key === 32){
	    	//Todo el contenido HTML
	        let prevHtml =  $(this).html().split("&nbsp;");
	        // obtenemos el último elemento ingresado
	        let value = prevHtml.pop();
	        // Inicializamos la variable con el contenido anterior
	        let newHTML = prevHtml.toString();
	        // Procesamos el contenido o etiqueta ingresada final
        	if(colorTomate.includes(value.toUpperCase().trim())){
        		newHTML += "<span class='color2'>" + value + "</span>&nbsp;";
        	}
        	else if(colorAnaranjado.includes(value.toUpperCase().trim())){
        		newHTML += "<span class='statement'>" + value + "</span>&nbsp;";
        	}
        	else{
        		newHTML+= value + "&nbsp;";
        	}	
		    $(this).html(newHTML);
		    setFocusEndElement(this);
	    }
	});

	function setFocusEndElement(element){
		if(document.createRange)
	    {
	    	// creamos el rango
	        let rango = document.createRange();
	        //Seleccionamos el contenido del elemento, div
	        // para este caso, pasado como parámetro 
	        rango.selectNodeContents(element);
	        // El paso más importante, collapse colocar
	        // el cursor al final del range (fragmento de nodos o texto) , el div 
	        // en este caso
	        rango.collapse(false);
	        //Remover el foco actual en la ventana
	        //obtenemos la selección
	        seleccionaFinal = window.getSelection();
	        //para luego remover los rangos de selección
	        seleccionaFinal.removeAllRanges();
	        // luego añadimos el rango donde queremos que el focus se posicione
	        // que será al final del contenido
	        seleccionaFinal.addRange(rango);
	    }  
	}
});
#editor {
    width: 400px;
    height: 100px;
    padding: 10px;
    background-color: #444;
    color: white;
    font-size: 14px;
    font-family: monospace;
}

.color2 {
    color: blue;
}

.statement {
    color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editor" contenteditable="true"></div>

2
  • cuando se escribe en medio el cursor se posiciona al final el 21 sep. 2018 a las 6:34
  • Hola @Dev.Joel Darle colores mediante una serie de tags es increíble, pero sigue existiendo ese efecto del focus o cuando se escribe para ser precisos, como un atascamiento, muy distinto a una escritura corrida sin ese efecto no muy agradable como robotizado, sería perfecto que el texto escrito fluyera sin ese efecto.
    – Stevin
    el 21 sep. 2018 a las 6:36
8
+25

El problema que estás sufriendo es debido a la regeneración del HTML del <div> que provoca el restablecimiento del cursor (o selección).

Es un tema muy complejo y podría complicarse el código enormemente para gestionar correctamente toda la jerarquía de hijos en un <div> complejo, pero al tener un único nivel el código puede simplicarse ligeramente.

Aquí puedes ver un ejemplo de cómo obtener el comienzo de la selección (siempre asumo un cursor estático sin selección) antes y después de modificar el contenido para mantener la posición del cursor virtualmente en el mismo lugar:

$("#editor").on("keyup", function(e) {
  if (e.keyCode == 32) {
    var text = $(this).text().replace(/[\s]+/g, " ").trim();
    var word = text.split(" ");
    var newHTML = "";
    let rango = window.getSelection().getRangeAt(0);
    let hijos = this.childNodes, i = -1, posicion = 0;
    /* Buscamos la posición del cursor dentro del texto */
    while (++i < hijos.length) {
      let nodo = hijos[i];
      /* Puede ser el nodo padre o bien el nodo texto hijo de los span */
      if (nodo.nodeType != 3) {
        nodo = nodo.childNodes[0];
        if (nodo.nodeType != 3) {
          continue;
        }
      }
      /* Si estamos en el nodo final, finalizamos la búsqueda */
      if (nodo == rango.endContainer) {
        break;
      }
      /* En caso contrario sumamos la longitud del contenido de texto */
      if (nodo.nodeType == 3) {
        posicion += nodo.length;
      }
    }
    /* Agregamos la posición dentro del nodo de texto: */
    posicion += rango.endOffset;
    console.log('Posición de texto: ', posicion);
    $.each(word, function(index, value){
      switch(value.toUpperCase()){
        case "DIV":
        case "SPAN":
        case "P":
          newHTML += "<span class='statement'>" + value + "&nbsp;</span>";
          break;
        default: 
          newHTML += "<span class='other'>" + value + "&nbsp;</span>";
      }
    });
    $(this).html(newHTML);
    /* Restablecemos la posición del cursor dentro del texto */
    hijos = this.childNodes, i = -1;
    let nodo = null;
    /* Buscamos la posición actualizada del cursor dentro del texto */
    while (posicion > 0 && ++i < hijos.length) {
      nodo = hijos[i];
      /* Puede ser el nodo padre o bien el nodo texto hijo de los span */
      if (nodo.nodeType != 3) {
        nodo = nodo.childNodes[0];
        if (nodo.nodeType != 3) {
          nodo = null;
          continue;
        }
      }
      /* Si estamos en el nodo final, finalizamos la búsqueda */
      if (nodo == rango.endContainer) {
        break;
      }
      /* En caso contrario sumamos la longitud del contenido de texto */
      if (nodo.nodeType == 3) {
        posicion -= nodo.length;
      }
    }
    if (nodo !== null) {
      let nuevo = document.createRange(), pos = posicion + nodo.length;
      /* En caso de estar tras el nodo, lo ponemos al final de éste */
      if (pos > nodo.length) {
        pos = nodo.length;
      }
      nuevo.selectNodeContents(nodo);
      nuevo.setStart(nodo, pos);
      nuevo.setEnd(nodo, pos);
      var seleccion = window.getSelection();
      seleccion.removeAllRanges();
      seleccion.addRange(nuevo);
    }
  }
});
#editor {
    width: 400px;
    height: 100px;
    padding: 10px;
    background-color: #444;
    color: white;
    font-size: 14px;
    font-family: monospace;
}
  
.statement {
    color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editor" contenteditable="true"></div>


Yo te recomendaría (como hice una pregunta anterior) usar una biblioteca de funciones que te permita personalizar los patrones como Ace:

#editor {
    width: 400px;
    height: 100px;
    padding: 10px;
    background-color: #444;
    color: white;
    font-size: 14px;
    font-family: monospace;
}

/* La clase debe ser "ace_<token>" */
.ace_statement {
    color: orange;
}
.ace_otros {
    color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js" integrity="sha256-kCykSp9wgrszaIBZpbagWbvnsHKXo4noDEi6ra6Y43w=" crossorigin="anonymous"></script>
<div id="editor" contenteditable="true">Prueba:
hola div p DIV P
otro h3 span jeje SPAN y br por fin BR</div>
<script>
  var editor = ace.edit("editor");
  editor.renderer.setShowGutter(false);
  /* Definimos el modo "mio" */
  define('ace/mode/mio', [], function(require, exports, module) {
    var oop = require("ace/lib/oop");
    var TextMode = require("ace/mode/text").Mode;
    var Tokenizer = require("ace/tokenizer").Tokenizer;
    /* Cargamos las reglas personalizadas de más abajo */
    var MioHighlightRules = require("ace/mode/mio_highlight_rules").MioHighlightRules;

    var Mode = function() {
      this.HighlightRules = MioHighlightRules;
    };
    oop.inherits(Mode, TextMode);
    (function() {
    }).call(Mode.prototype);
    exports.Mode = Mode;
  });

  
  define('ace/mode/mio_highlight_rules', [], function(require, exports, module) {
    "use strict";
    var oop = require("ace/lib/oop");
    var TextHighlightRules = require("ace/mode/text_highlight_rules").TextHighlightRules;
    console.log('Aplicando reglas propias');
    var MioHighlightRules = function() {
      /* Los patrones no deben usar paréntesis de captura. Use en su lugar (?:). */
      this.$rules = {
        "start" : [
          {
            token: 'statement', // Token CSS
            regex: "(:?^|\\W)(:?p|div|span|font)(?=(:?$|\\W))",
            caseInsensitive: true,
          },
          {
            token: 'otros', // Token CSS
            regex: "(:?$|\\W)(:?br|h1|h2|h3)(?=(:?$|\\W))",
            caseInsensitive: true,
          },
        ]
      };

      console.log('Finalizando');
      this.normalizeRules();
    };
    oop.inherits(MioHighlightRules, TextHighlightRules);
    exports.MioHighlightRules = MioHighlightRules;
  });
  /* Cargamos el módulo definido anteriormente */
  editor.session.setMode('ace/mode/mio');
</script>

6

Por tu nivel de exigencia tal vez deberías buscar alguna librería más "sofisticada" de javascript que cumpla las funciones de "editor" o que al menos efectué el coloreado de palabras claves en tiempo real (porque existen algunas pero solo en párrafos precargados). Por ejemplo, Ace. Ácá se muestra un ejemplo muy básico aplicando el editor, el cual transcribo a continuación:

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
#editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>
<div id="editor">
var x = 100;
var text = "hello, world";

console.log(x);
alert(text);
</div>

Por otro lado, también hay códigos más simple como éste. En éste último caso se deben codificar las palabras a resaltar y retornar el color/tag en cada caso (mientras que el caso de una librería/editor ya disponen de lenguajes predefinidos, temas visuales, etc.)

1
  • Hola @L.AlejandroM gracias por los ejemplos dados seguro serán de ayuda en un futuro y quizás opté por ellos +1 por las alternativas, saludos!
    – Stevin
    el 27 sep. 2018 a las 10:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.