可以即时进行语法高亮显示的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

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

如果可以,请尝试CodeMirror或Ace (以前是skywriter和bespin)或Monaco(在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)以及实时语法突出显示(可自定义)的格式良好的源代码。

  • CodePress ― Joomla演示!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.