Tengo un área de texto HTML, que contiene un archivo JSON editable en vivo personalizado donde puede ver los resultados de las ediciones en tiempo real. También tengo algo que puede recorrer las entradas en un atributo de "puntos", que es una lista, donde muestra los resultados en el lienzo donde se ven los resultados de JSON, de modo que uno puede ver qué punto se está seleccionando.
Quiero que el punto en el área de texto pueda formatearse cuando se seleccione, como que el punto seleccionado en el área de texto JSON se resalte en amarillo o cambie el color del texto a azul o algo así.
He intentado esto:
<textarea id="objtext"> not orange <span style="color:orange"> orange </span> not orange </textarea>Simplemente mostró que el área de texto tenía eso como texto, en lugar de formatear dentro del área de texto.
¿Cómo lo hago formateado (y editable y legible por código con textarea.value idealmente sin el formato)?
Desafortunadamente, no es posible hacer esto con un área de texto ni con etiquetas de entrada.
Puedes usar en su lugar:
<div contenteditable="true"> Lorem Ipsum <span style="color: red;">Lorem</span> </div>Editor WYSIWYG como https://github.com/tinymce/tinymce
Herramientas similares según la complejidad que tengas que aportar
Consulte Highlight.js + un div editable.
Ejemplo:
<link rel="stylesheet" href="/path/to/styles/default.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script> <script> document.addEventListener('DOMContentLoaded', (event) => { document.querySelectorAll('code').forEach((el) => { hljs.highlightElement(el); }); }); </script> <pre><code class="hightlight-json" contenteditable="True">{ "menu": { "id": "file", "value": "File", "popup": { "menuitem": "None", } } } </code> </pre>No creo que esto sea posible con textarea . Creo que epascarello está tratando de decirle que es posible usar un div con el atributo contenteditable="true" .
Consulte esta pregunta similar: ¿es posible tener varios colores de texto diferentes en un área de texto?
Deberá diseñar el div para que se vea y se sienta como un área de texto. Aquí hay una maqueta básica, es posible que deba agregar algo de Javascript para ampliar esto.
<div id="objtext" contenteditable="true"> not orange <span class="orange-text"> orange </span> not orange </div> #objtext { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; border: 1px solid gray; overflow: auto; padding: 4px; width: 400px; height: 200px; font: medium -moz-fixed; font: -webkit-small-control; } .orange-text { color: orange; } ::selection { color:orange; } ::-moz-selection { color:orange; }https://jsfiddle.net/miainchambers/g07rcb5o/2/
El valor del texto se puede recuperar usando document.getElementById("objtext").textContent