可以即时进行语法高亮显示的Textarea吗?


203

由于易于维护,我在CMS内存储了许多HTML块。它们以<textarea>s 表示。

有谁知道某种JavaScript Widget可以在一个textarea或类似的语言中对HTML进行语法高亮显示,同时仍然保留纯文本编辑器(没有WYSIWYG或高级功能)?


1
W3C是否有可能textarea在(X)HTML规范和相关标准的未来版本中变得更加通用和可扩展?
James Haigh,

3
@FabienMénager您的重复链接已被删除。
Patrick Roberts

Answers:


217

无法在常规文本区域中实现所需的外观控制级别。

如果可以,请尝试CodeMirrorAce (以前是skywriterbespinMonaco(在MS VSCode中使用)。

在重复的线程中-强制性的Wikipedia链接:http : //en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors


3
实际上,Bespin使用常规的textarea后备广告来添加对屏幕阅读器的支持(因此残疾人也可以轻松使用它)。
Eli Gray

2
CodeMirror看起来完全符合我的需求。只要它的行为像文本区域,我会对它不是一个文本区域感到满意。
Pekka

1
感谢您的回答。在阅读您的回复后,发现了这一点,这让我震惊!:) github.com/securingsincity/react-ace
凯西

27

这是程序员的类似问题在线代码编辑器)的回答

首先,您可以看一下这篇文章:
Wikipedia ―基于JavaScript的源代码编辑器的比较

有关更多信息,以下一些工具似乎可以满足您的要求:

  • EditArea - 演示为FileEditor谁是Yii的扩展 - (Apache软件许可证,BSD,LGPL

    这是EditArea,一个免费的Javascript源代码编辑器。它允许编写行号,标签支持,搜索和替换(使用regexp)以及实时语法突出显示(可自定义)的格式良好的源代码。

  • CodePressJoomla演示!CodePress插件 ―(LGPL)―在Chrome中不起作用,并且看来开发已经停止。

    CodePress是基于Web的源代码编辑器,具有以JavaScript编写的语法突出显示功能,可在浏览器中键入文本时实时为文本着色。

  • CodeMirror - 其中许多演示 - (MIT式许可证+可选的商业支持

    CodeMirror是一个JavaScript库,可用于为类似代码的内容(计算机程序,HTML标记等)创建相对令人满意的编辑器界面。如果已经为您正在编辑的语言编写了模式,则代码将带有颜色,并且编辑器可以选择帮助您缩进

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

    Ace是用JavaScript编写的独立代码编辑器。我们的目标是创建一个基于Web的代码编辑器,以匹配并扩展现有本机编辑器(如TextMate,Vim或Eclipse)的功能,可用性和性能。它可以轻松地嵌入任何网页和JavaScript应用程序中。Ace是Cloud9 IDE的主要编辑器,也是Mozilla Skywriter(Bespin)项目的后继者。


1
哦,这简直令人沮丧...有100个项目应该做到这一点,但绝对没有一个项目能奏效。
RobinJ

Ace编辑的许可证已更改为BSD github.com/ajaxorg/ace/blob/master/LICENSE
S.Krishna



7

更新: Bespin现在是ACE,在这里获得最高评分的答案提到了ACE。请改用ACE。

一定要和Mozilla的Bespin一起去。它是使用HTML5功能构建的(因此它速度很快,但不支持旧版浏览器),但是使用起来确实很棒,并且击败了我遇到的所有内容-可能是因为Mozilla支持它,所以他们开发了Firefox。 ..还有一个jQuery插件,其中包含一个扩展,使其可以更轻松地与jQuery一起使用。



2

我所知道的唯一具有语法高亮显示并回退到文本区域的编辑器是Mozilla Bespin。Google到处嵌入Bespin,以了解如何嵌入编辑器。我知道的唯一现在使用此网站的站点是Alpha Mozilla Jetpack Gallery(在提交Jetpack页面中),您可能想看看它们是如何包含它的。

还有一篇有关嵌入和重新使用Bespin编辑器博客文章,可能会对您有所帮助。


Ace是Mozilla Bespin项目的后继者。
Zachary Keener

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.