Preciso de ajuda com este código de: indentação de código.

leoparis disse:

Prueba este código:

Inserir CODE, HTML ou 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.

Clique para expandir...

bits4me disse:

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.

Clique para expandir...