为了便于维护，我在 CMS 中存储了许多 HTML 块。它们由<textarea>s 表示。
有没有人知道某种 JavaScript Widget，它可以在 textarea 或类似文件中为 HTML 进行语法突出显示，同时仍保持纯文本编辑器（无所见即所得或高级功能）？
【问题讨论】：
textarea 更加通用和可扩展？
标签： javascript html richtextbox widget highlighting
在常规textarea 中无法实现对演示文稿的所需控制级别。
如果您同意，请尝试 CodeMirror 或 Ace 或 Monaco（用于 MS VSCode）。
来自重复的线程 - 一个强制性的维基百科链接：Comparison of JavaScript-based source code editors
【讨论】：
这里是the response I've done to a similar question（Online Code Editor）programmers：
首先，你可以看看这篇文章：
Wikipedia ― Comparison of JavaScript-based source code editors。
更多，这里有一些似乎符合您要求的工具：
EditArea ― Demo as FileEditor 是Yii Extension ― （Apache 软件许可证、BSD、LGPL）
这里是 EditArea，一个免费的源代码 javascript 编辑器。它允许编写格式良好的源代码，具有行编号、选项卡支持、搜索和替换（使用正则表达式）和实时语法突出显示（可自定义）。
CodePress ― Demo of Joomla! CodePress Plugin ― (LGPL) ― 它在 Chrome 中不起作用，看起来开发已经停止。
CodePress 是基于 Web 的源代码编辑器，具有用 JavaScript 编写的语法突出显示功能，可在文本在浏览器中输入时实时着色。
CodeMirror ― One of the many demo ― (MIT-style 许可证 + 可选 commercial support)
CodeMirror 是一个 JavaScript 库，可用于为类似代码的内容（计算机程序、HTML 标记等）创建一个相对舒适的编辑器界面。如果已为您正在编辑的语言编写了模式，则代码将被着色，并且编辑器将选择性地帮助您缩进
Ace Ajax.org Cloud9 Editor ― Demo ― (Mozilla 三许可证 (MPL/GPL/LGPL))
Ace 是一个用 JavaScript 编写的独立代码编辑器。我们的目标是创建一个基于 Web 的代码编辑器，以匹配并扩展现有本地编辑器（如 TextMate、Vim 或 Eclipse）的特性、可用性和性能。它可以很容易地嵌入到任何网页和 JavaScript 应用程序中。 Ace 是作为 Cloud9 IDE 的主要编辑器开发的，也是 Mozilla Skywriter (Bespin) 项目的继任者。
【讨论】：
我建议EditArea 实时编辑语法高亮文本区域。
【讨论】：
您可以在<textarea> 中突出显示文本，并在其后面小心放置<div>。
【讨论】：
更新： Bespin 现在是 ACE，此处评分最高的答案提到了这一点。请改用 ACE。
必须使用 Mozilla 的 Bespin。它是使用 HTML5 功能构建的（因此它既快速又快速，但不支持旧版浏览器），但使用起来绝对令人惊叹，并且击败了我遇到的所有东西 - 可能是因为 Mozilla 支持它，而且他们开发了 Firefox，是的。 .. 还有一个jQuery Plugin which contains a extension for it 使它更容易与 jQuery 一起使用。
【讨论】：
我所知道的唯一具有语法高亮和回退到文本区域的编辑器是Mozilla Bespin。谷歌搜索嵌入 Bespin 以了解如何嵌入编辑器。我知道现在唯一使用这个的网站是非常 alpha Mozilla Jetpack Gallery（在提交 Jetpack 页面中），您可能想看看它们是如何包含它的。
还有一个blog post on embedding and reusing the Bespin editor 可以帮助你。
【讨论】：
您实际上无法在文本区域内呈现标记。
但是，您可以通过在 textarea 后面小心放置一个 div 并在其中添加高亮标记来伪造它。
JavaScript 负责同步内容和滚动位置。
var $container = $('.container');
var $backdrop = $('.backdrop');
var $highlights = $('.highlights');
var $textarea = $('textarea');
var $toggle = $('button');
var ua = window.navigator.userAgent.toLowerCase();
var isIE = !!ua.match(/msie|trident\/7|edge/);
var isWinPhone = ua.indexOf('windows phone') !== -1;
var isIOS = !isWinPhone && !!ua.match(/ipad|iphone|ipod/);
function applyHighlights(text) {
text = text
.replace(/\n$/g, '\n\n')
.replace(/[A-Z].*?\b/g, '<mark>$&</mark>');
if (isIE) {
// IE wraps whitespace differently in a div vs textarea, this fixes it
text = text.replace(/ /g, ' <wbr>');
}
return text;
}
function handleInput() {
var text = $textarea.val();
var highlightedText = applyHighlights(text);
$highlights.html(highlightedText);
}
function handleScroll() {
var scrollTop = $textarea.scrollTop();
$backdrop.scrollTop(scrollTop);
var scrollLeft = $textarea.scrollLeft();
$backdrop.scrollLeft(scrollLeft);
}
function fixIOS() {
$highlights.css({
'padding-left': '+=3px',
'padding-right': '+=3px'
});
}
function bindEvents() {
$textarea.on({
'input': handleInput,
'scroll': handleScroll
});
}
if (isIOS) {
fixIOS();
}
bindEvents();
handleInput();@import url(https://fonts.googleapis.com/css?family=Open+Sans);
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 30px;
background-color: #fff;
caret-color: #000;
}
.container,
.backdrop,
textarea {
width: 460px;
height: 180px;
}
.highlights,
textarea {
padding: 10px;
font: 20px/28px 'Open Sans', sans-serif;
letter-spacing: 1px;
}
.container {
display: block;
margin: 0 auto;
transform: translateZ(0);
-webkit-text-size-adjust: none;
}
.backdrop {
position: absolute;
z-index: 1;
border: 2px solid #685972;
background-color: #fff;
overflow: auto;
pointer-events: none;
transition: transform 1s;
}
.highlights {
white-space: pre-wrap;
word-wrap: break-word;
color: #000;
}
textarea {
display: block;
position: absolute;
z-index: 2;
margin: 0;
border: 2px solid #74637f;
border-radius: 0;
color: transparent;
background-color: transparent;
overflow: auto;
resize: none;
transition: transform 1s;
}
mark {
border-radius: 3px;
color: red;
background-color: transparent;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="backdrop">
<div class="highlights"></div>
</div>
<textarea>All capitalized Words will be highlighted. Try Typing to see how it Works</textarea>
</div>【讨论】：
总而言之，这些是我们可以选择的：
为了节省您的时间和精力，最好在这些范围内进一步调查。
【讨论】：
您为什么将它们表示为文本区域？这是我最喜欢的：
http://alexgorbatchev.com/wiki/SyntaxHighlighter
但如果您使用的是 CMS，可能会有更好的插件。例如，wordpress 有一个进化版：
http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/
【讨论】：
这可以通过在 textarea 前面添加一个覆盖 code 块来实现，并使用它来应用其他几个提到的语法突出显示。
但是，有一些边缘情况需要处理。 本文详细介绍了它们： https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code
谢天谢地，作者将其创建为自定义元素 https://github.com/WebCoder49/code-input
【讨论】：