1

Hasta hace poco usaba un textarea como un pequeño "editor de código" que hay en la aplicación que estoy haciendo en JS, y como editor de código que es, necesita permitir usar el <tab> para indentar. Con el textarea, usaba este código:

codeBox.onkeydown = function(e){
    if(e.keyCode==9 || e.which==9){
        e.preventDefault();
        var s = this.selectionStart;
        this.value = this.value.substring(0,this.selectionStart) + "    " + this.value.substring(this.selectionEnd);
        this.selectionEnd = s + 4; 
    }

Sí, se usan 4 espacios en vez de tabs.

El problema es que he decidido cambiar el textarea por un div con ContentEditable (para cosas estilísticas del texto y cosas así), pero el código anterior ya no funciona, y la razón es que selectionStarty selectionEnd no son propiedades más que de inputs y textarea.

¿Alguna idea de cómo hacer esto para divs?

1 respuesta 1

1

No hay solución elegante, pero este truco te puede servir. Recuerda que si no añades white-space:pre-wrap; a los CSS del editor, no funciona.

$(document).on('keydown','#editor', function(e){
  //detect 'tab' key
  if(e.keyCode == 9){
    //add tab
    document.execCommand('insertHTML', false, '&#009');
    //prevent focusing on next element
    e.preventDefault()   
  }
});
#editor {
  width: 300px;
  height: 150px;
  border: 1px solid;
  white-space:pre-wrap
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editor" contenteditable="true">
</div>

Respuesta obtenida de la versión en inglés de tu pregunta

1
  • 1
    Muchas gracias, modificándolo un poco he logrado hacer casi lo que necesito. Pero me surge un problema para mejorar la indentación, y es que necesito obtener la posición y la línea en la que se encuentra el puntero dentro del div. ¿Alguna idea de cómo hacerlo? Gracias de antemano.
    – Daniel
    Commented el 21 oct. 2017 a las 5:17

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.