Javascript 寻找与formattable textarea等效的简单文本区域

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

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

看起来像一个文本区域

可以调整大小（如Chrome中的文本区域）

允许使用标记和类（例如，子字符串）在其内部格式化子字符串

我不想要的是：

工具栏/按钮等

一个复杂的api，以便简单地执行上述操作

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

---

非常感谢您的指导、想法等。

您可以选择编辑。 很容易配置和使用其API:

---

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

CKEditor可能是您的选择。 很容易配置和使用其API:

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

我强烈建议（等等）。它已经有了大量的格式选项，听起来正是您想要的（语法高亮）。它是非常可定制的（我已经能够让这个东西向后弯曲），并且可以在很多浏览器上工作

您可以从开始，并根据需要对其进行定制（当您说查询时，我假设使用某种SQL，但若我弄错了，其他模式可以替代）

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

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

我强烈建议。它已经有了大量的格式选项，听起来正是您想要的（语法高亮）。它是非常可定制的（我已经能够让这个东西向后弯曲），并且可以在很多浏览器上工作

您可以从开始，并根据需要对其进行定制（当您说查询时，我假设使用某种SQL，但若我弄错了，其他模式可以替代）

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

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

---

如果我理解正确，您可以使用

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>

foo-bar
显示

如果我理解正确，您可以使用

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>

foo-bar
显示

如果事情真的很简单，你可能想检查“contenteditable”属性。@AlexanderPavlov，在使用

contenteditable

一段时间后，我不得不说它没有一件事是简单的。是的，背后的想法很简单，总有一天它会很简单，但是浏览器的不一致性使得任何结构化的东西（特别是像这样的东西）都几乎无法使用。对，我只是建议这样做是因为OP在Google Chrome上的标准化点，而且它发展得很快。哦，对，很好。我的错！不幸的是，“contenteditable”不会导致调整大小的内容出现在div上。如果事情真的很简单，您可能需要检查“contenteditable”属性。@AlexanderPavlov，在使用

contenteditable

一段时间后，我不得不说它没有一件事是简单的。是的，背后的想法很简单，总有一天它会很简单，但是浏览器的不一致性使得任何结构化的东西（特别是像这样的东西）都几乎无法使用。对，我只是建议这样做是因为OP在Google Chrome上的标准化点，而且它发展得很快。哦，对，很好。我的错！不幸的是，“contenteditable”不会导致调整大小的内容出现在div上。请注意：如果您想以任何方式控制HTML（或编辑器外观），我建议您不要使用

contenteditable

。在遇到CodeMirror之前，我使用它已经有一段时间了，浏览器的不一致性是一个绝对的痛苦。你必须经历几次黑客攻击才能使基本用法看起来相同（输出，而不是HTML，这是一个完全不同的故事）。我试过了，但据我所知，没有办法使div的大小可以调整。我试过JQueryUI的“可调整大小”小部件，但有一个大问题：如果你继续创建新行，它会为每一行创建一个新的div，最终你的新行会出现在可调整大小小部件的下边界下。@davej，在CSS中，

div

的

和
对你都有效吗？@Jukka，不幸的是，没有，没有。我刚刚试过，当我在“Inspect element”中检查它时，它显示div确实有css规则“resize:both”，但我没有得到右下角的小resize句柄。谢谢你的意见，tho@davej，这很奇怪，在Chrome17（Win7）上运行得很好，我给出了标记，只添加了这个声明。顺便说一句，它也适用于Firefox。请注意：如果您想以任何方式控制HTML（或编辑器外观），我建议您不要使用
contenteditable
。在遇到CodeMirror之前，我使用它已经有一段时间了，浏览器的不一致性是一个绝对的痛苦。你必须通过几次破解才能得到基本的u