Área de texto que pode destacar a sintaxe em tempo real?

203

Estou armazenando vários blocos HTML dentro de um CMS por motivos de manutenção mais fácil. Eles são representados por <textarea>s.

Alguém conhece algum widget JavaScript de algum tipo que possa destacar a sintaxe do HTML em um textareaou similar, enquanto ainda permanece um editor de texto sem formatação (sem WYSIWYG ou funções avançadas)?

javascript html richtextbox widget highlighting Pekka
fonte
1
É possível que o W3C possa se tornar textareamais versátil e extensível em uma versão futura da especificação HTML (X) e dos padrões relacionados?
James Haigh
3
@ FabienMénager seu link duplicado foi removido.
Patrick Roberts
3
Isso ajudaria codepen.io/kazzkiq/pen/xGXaKR
Shan Eapen Koshy

Respostas:

217

Não é possível atingir o nível de controle necessário sobre a apresentação em uma área de texto regular.

Se você está OK com isso, tentar CodeMirror ou Ace (anteriormente skywriter e bespin ) , ou Monaco (usado em MS VSCode).

No thread duplicado - um link obrigatório da wikipedia: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Nickolay
fonte
3
Na verdade, Bespin usa um fallback regular da área de texto para adicionar suporte aos leitores de tela (para que pessoas com deficiência também possam usá-lo facilmente).
Eli Grey
2
O CodeMirror se parece exatamente com o que eu preciso. Desde que se comporte como uma área de texto, eu me sinto à vontade para não ser uma.
586 Pekka
1
Obrigado pela resposta. Encontrei isso depois de ler sua resposta e isso está me surpreendendo! :) github.com/securingsincity/react-ace
Casey
27

Aqui está a resposta que eu fiz a uma pergunta semelhante ( Online Code Editor ) sobre programadores :

Primeiro, você pode dar uma olhada neste artigo:
Wikipedia - Comparação de editores de código-fonte baseados em JavaScript .

Para mais, aqui estão algumas ferramentas que parecem se encaixar com sua solicitação:

  • EditArea - Demonstração como FileEditor que é uma extensão Yii - ( Apache Software License, BSD, LGPL )

    Aqui está o EditArea, um editor de javascript gratuito para o código-fonte. Permite escrever código fonte bem formatado com numeração de linhas, suporte a guias, pesquisa e substituição (com regexp) e realce de sintaxe ao vivo (personalizável).

  • CodePress - Demo do Joomla! CodePress Plugin - ( LGPL ) - Ele não funciona no Chrome e parece que o desenvolvimento cessou.

    O CodePress é um editor de código-fonte baseado na Web, com destaque de sintaxe escrito em JavaScript que colore o texto em tempo real enquanto ele está sendo digitado no navegador.

  • CodeMirror - Uma das muitas demonstrações - ( licença no estilo MIT + suporte comercial opcional )

    CodeMirror é uma biblioteca JavaScript que pode ser usada para criar uma interface de editor relativamente agradável para conteúdo semelhante a código - programas de computador, marcação HTML e similares. Se um modo tiver sido escrito para o idioma que você está editando, o código será colorido e, opcionalmente, o editor o ajudará na indentação

  • Ace Ajax.org Cloud9 Editor - Demo - ( licença tripla da Mozilla (MPL / GPL / LGPL) )

    Ace é um editor de código independente escrito em JavaScript. Nosso objetivo é criar um editor de código baseado na Web que corresponda e amplie os recursos, a usabilidade e o desempenho dos editores nativos existentes, como TextMate, Vim ou Eclipse. Ele pode ser facilmente incorporado em qualquer página da Web e aplicativo JavaScript. Ace foi desenvolvido como o editor principal do Cloud9 IDE e o sucessor do projeto Mozilla Skywriter (Bespin).

Pascal Qyy
fonte
1
Oh, isso é tão deprimente ... 100 projetos que deveriam fazer isso, e absolutamente nenhum que funcione.
RobinJ
Carteira de Ace editor foi alterada para BSD github.com/ajaxorg/ace/blob/master/LICENSE
S.Krishna
9

Eu recomendaria o EditArea para edição ao vivo de uma área de texto com destaque em sintaxe.

Daniel Bardi
fonte
7

Atualizar: Bespin agora é ACE, que é mencionado pela resposta mais bem avaliada aqui. Use o ACE.

Tenho que ir com o Bespin da Mozilla. Ele foi criado usando os recursos HTML5 (por isso é rápido e rápido, mas não suporta navegadores herdados), mas definitivamente incrível de usar e supera tudo o que eu já vi - provavelmente porque é o Mozilla fazendo o backup e eles desenvolvem o Firefox. .. Há também um plug-in jQuery que contém uma extensão para torná-lo um pouco mais fácil de usar com o jQuery.

Balupton
fonte
2

O único editor que conheço que possui destaque de sintaxe e um fallback para uma área de texto é o Mozilla Bespin . Pesquise no Google a incorporação do Bespin para ver como incorporar o editor. O único site que conheço que usa isso agora é a Mozilla Jetpack Gallery muito alfa (na página de envio de uma Jetpack) e você pode querer ver como eles a incluem.

Há também uma postagem no blog sobre a incorporação e reutilização do editor Bespin que pode ajudá-lo.

Eli Gray
fonte
Ace é o sucessor do projeto Mozilla Bespin.
Zachary Keener
1

Por que você os está representando como áreas de texto? Esse é meu favorito:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Mas se você estiver usando um CMS, provavelmente haverá um plugin melhor. Por exemplo, o wordpress tem uma versão evoluída:

http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

Matrym
fonte
15
Estes plugins não permitem on-the-fly destaque de sintaxe como em um textarea
Fabien Ménager
1
Link quebrado.
imitar