寻找一个与可格式化文本区域简单等效的东西

Question

我创建了一个小 dsl 来查询我们公司的数据库。我现在正在尝试创建一个网络前端。我开始使用文本区域来允许用户输入他们的查询，但最近发现您无法在文本区域中设置文本片段的格式（我会这样做以突出显示查询文本中的错误等）——标签在文本区域中不起作用。

我们已经在 Google Chrome 上进行了标准化，所以我想要一个小部件：

1. 看起来
2. 可以调整文本区域的大小（如 Chrome 中的文本区域）
3. 允许使用标签和类（例如，子字符串）对自身内部的子字符串进行格式化

我不想要的是：

1. 工具栏/按钮等
2. 复杂的API，以便简单地执行上述操作。

我看过 tinymce，但不知道如何获取文本区域的整个文本，搜索一个子字符串，然后将该子字符串包装在标签中。 （我已经用常规文本区域和 javascript 完成了此操作，所以如果它相似，那就太好了。）

任何指导、想法等，非常感谢。

Answer 1

如果我理解正确，您可以使用带有 contenteditable 属性和一些样式的 div （或其他）元素。然后，您可以在 innerHTML 属性中获取带有标记的元素内容，并在 textContent 属性中获取纯文本。简单的例子：

<div contenteditable style=
  "width: 20em; height: 10em; overflow: auto; border: solid gray 1px" 
  id=c>foo <i>bar</i></div>
<button onclick="alert(document.getElementById('c').innerHTML)">show</button>

Answer 2

CKEditor 可能是您的选择。
配置和使用其 API 很容易：
http://ckeditor.com/
http://docs.cksource.com/

您可以创建自己的工具栏，也可以不使用任何工具栏。

Answer 3

我强烈建议 CodeMirror （以及 GitHub）。它有大量可用的格式选项，听起来正是您正在寻找的（语法荧光笔）。它是高度可定制的（我已经能够让这个东西为我而努力）并且可以在大量浏览器上运行。

您可以从 MySQL 模式 开始，并根据需要自定义它（我假设当你说查询时，是某种 SQL，但如果我弄错了，其他模式也可以工作）。

要让编辑器自动调整大小，请将以下内容添加到 CSS 中：

.CodeMirror-scroll {
  height: auto;
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%
}