Necesito ayuda con este código de: indentación de código.

leoparis dijo:

Prueba este código:

Insertar CODE, HTML o PHP:

<div contenteditable="true" onkeyup="addIndent(event)">
  <!-- contenido editable aquí -->
</div>

<script>
function addIndent(event) {
  if (event.keyCode === 13) {
    let content = document.getSelection().toString();
    if (content.startsWith("{") && content.endsWith("}")) {
      event.preventDefault();
      let textNode = document.createTextNode('\n  ');
      let range = document.getSelection().getRangeAt(0);
      range.insertNode(textNode);
      range.setStartAfter(textNode);
      range.setEndAfter(textNode);
      document.getSelection().collapseToEnd();
    } else {
      document.execCommand('indent', false, null);
      document.execCommand('insertText', false, ' ');
    }
  }
}
</script>

Cuando se presiona la tecla "Enter" con este código (event.keyCode === 13), se examina el texto elegido para determinar si comienza y termina con llaves. Si es así, se forma un nuevo nodo de texto con una nueva línea y dos espacios y se agrega al documento.

Hacer clic para expandir...

bits4me dijo:

Ten en cuenta que el cursor dentro del contenteditable no se puede mantener en la misma posición al formatear el código. Por lo tanto, si se intenta mantener la posición anterior del cursor, puede generar resultados impredecibles. Te dejo una versión de tu pen pero usando el comando ctrl + shift + f.

Hacer clic para expandir...