Question

我创建了一个用于查询公司数据库的dsl。我现在正在尝试创建一个Web前端。我开始使用textareas来允许用户输入他们的查询，但最近发现你不能在textareas中设置文本片段（我会这样做以突出显示查询文本中的错误等） - 标签在textarea中不起作用。

我们已经在Google Chrome上进行了标准化，因此我想要的是一个小部件：

看起来像文字区域
可以调整大小（如Chrome中的textareas）
允许使用标签和类（例如子字符串）格式化自身内的子串

我不想要的东西：

工具栏/按钮等
一个复杂的api，以便简单地执行上述操作。

我查看了tinymce，但无法弄清楚如何获取textarea的整个文本，搜索子字符串，然后将该子字符串包装在标记中。（我用普通的textarea和javascript完成了这个，所以如果它很相似，很棒。）

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

Answer 1

如果我理解正确，您可以使用div（或其他）元素和contenteditable属性以及一些样式。然后，您可以使用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 Mode开始，并根据需要进行自定义（当你说查询时我会假设某种SQL，但是如果我弄错的话，其他模式可能会起作用）。

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

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

寻找简单的等效格式表textarea

3 个答案: