Área de texto que puede resaltar la sintaxis sobre la marcha?

203

Estoy almacenando varios bloques HTML dentro de un CMS por razones de mantenimiento más fácil. Están representados por el <textarea>s.

¿Alguien conoce un widget de JavaScript de algún tipo que pueda resaltar la sintaxis para HTML dentro de un textareao similar, sin dejar de ser un editor de texto sin formato (sin WYSIWYG o funciones avanzadas)?

javascript html richtextbox widget highlighting Pekka
fuente
1
¿Es posible que el W3C pueda ser textareamás versátil y extensible en una versión futura de la especificación (X) HTML y los estándares relacionados?
James Haigh
3
@ FabienMénager su enlace duplicado ha sido eliminado.
Patrick Roberts
3
Esto ayudaría a codepen.io/kazzkiq/pen/xGXaKR
Shan Eapen Koshy el

Respuestas:

217

No es posible lograr el nivel de control requerido sobre la presentación en un área de texto normal.

Si estás bien con eso, tratar CodeMirror o As (anteriormente Skywriter y bespin ) , o Mónaco (utilizado en MS VSCode).

Del hilo duplicado: un enlace obligatorio de wikipedia: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Nickolay
fuente
3
En realidad, Bespin utiliza una reserva de área de texto regular para agregar soporte para lectores de pantalla (para que las personas con discapacidad también puedan usarlo fácilmente).
Eli Gray
2
CodeMirror se ve exactamente como lo que necesito. Mientras se comporte como un área de texto, me siento cómodo con que no sea uno.
Pekka
1
Gracias por tu respuesta. ¡Encontré esto después de leer tu respuesta y me está volviendo loco! :) github.com/securingsincity/react-ace
Casey
27

Aquí está la respuesta que hice a una pregunta similar ( Editor de código en línea ) sobre programadores :

Primero, puede echar un vistazo a este artículo:
Wikipedia - Comparación de editores de código fuente basados ​​en JavaScript .

Para obtener más información, aquí hay algunas herramientas que parecen ajustarse a su solicitud:

  • EditArea - Demo como FileEditor que es una extensión Yii - ( Licencia de software Apache, BSD, LGPL )

    Aquí está EditArea, un editor de JavaScript gratuito para el código fuente. Permite escribir código fuente bien formateado con numeración de línea, soporte de pestañas, búsqueda y reemplazo (con regexp) y resaltado de sintaxis en vivo (personalizable).

  • CodePress - Demo de Joomla! CodePress Plugin - ( LGPL ) - No funciona en Chrome y parece que el desarrollo ha cesado.

    CodePress es un editor de código fuente basado en la web con resaltado de sintaxis escrito en JavaScript que colorea el texto en tiempo real mientras se escribe en el navegador.

  • CodeMirror - Una de las muchas demostraciones - ( licencia de estilo MIT + soporte comercial opcional )

    CodeMirror es una biblioteca de JavaScript que se puede usar para crear una interfaz de editor relativamente agradable para contenido similar a código: programas de computadora, marcado HTML y similares. Si se ha escrito un modo para el idioma que está editando, el código se coloreará y el editor opcionalmente lo ayudará con la sangría

  • Ace Ajax.org Cloud9 Editor - Demo - ( Mozilla tri-license (MPL / GPL / LGPL) )

    Ace es un editor de código independiente escrito en JavaScript. Nuestro objetivo es crear un editor de código basado en la web que coincida y amplíe las características, la usabilidad y el rendimiento de los editores nativos existentes, como TextMate, Vim o Eclipse. Se puede incrustar fácilmente en cualquier página web y aplicación de JavaScript. Ace se desarrolla como el editor principal de Cloud9 IDE y el sucesor del Proyecto Mozilla Skywriter (Bespin).

Pascal Qyy
fuente
1
Oh, esto es tan deprimente ... A 100 proyectos que se supone que deben hacer esto, y absolutamente ninguno que simplemente funcione.
RobinJ
La licencia de editor de Ace se ha cambiado a BSD github.com/ajaxorg/ace/blob/master/LICENSE
S. Krishna
9

Recomendaría EditArea para la edición en vivo de un área de texto resaltado de sintaxis.

Daniel Bardi
fuente
7

Actualización: Bespin ahora es ACE, que se menciona aquí por la respuesta mejor calificada. Use ACE en su lugar.

Tengo que ir con Bespin por Mozilla. Está construido con funciones HTML5 (por lo que es rápido y rápido, pero no es compatible con los navegadores heredados), pero definitivamente es increíble de usar y supera todo lo que he encontrado, probablemente porque Mozilla lo respalda y desarrollan Firefox, así que sí. .. También hay un complemento jQuery que contiene una extensión para que sea ​​un poco más fácil de usar con jQuery.

Balupton
fuente
2

El único editor que conozco que tiene resaltado de sintaxis y una alternativa a un área de texto es Mozilla Bespin . Google alrededor para incrustar Bespin para ver cómo incrustar el editor. El único sitio que conozco que usa esto en este momento es la muy alfa Galería Mozilla Jetpack (en la página de envío de Jetpack) y es posible que desee ver cómo la incluyen.

También hay una publicación de blog sobre incrustación y reutilización del editor Bespin que puede ayudarlo.

Eli Gray
fuente
Ace es el sucesor del proyecto Mozilla Bespin.
Zachary Keener el