JavaScript 入门

示例

HTML属性contenteditable提供了一种将HTML元素变成用户可编辑区域的简单方法

<div contenteditable>You can <b>edit</b> me!</div>

本机富文本编辑

使用JavaScript和execCommand^W3C，您还可以将更多的编辑功能传递给当前关注的contenteditable元素（特别是在插入符号位置或选择处）。

该execCommand函数方法接受3个参数

document.execCommand(commandId, showUI, value)

• commandId串。从可用的** commandId **列表中
  ^{（请参阅：参数→commandId）}

• showUI布尔值（未实现。请使用false）

• valueString如果命令需要与命令相关的String值，则为""。
  ^{（请参阅：参数→值）}

使用实施例的"bold" 命令和"formatBlock"（其中一个值是预期的）：

document.execCommand("bold", false, "");          // 将所选文字设为粗体
document.execCommand("formatBlock", false, "H2"); // Make selected text Block-level <h2>

快速入门示例：

<button data-edit="bold"><b>B</b></button>
<button data-edit="italic"><i>I</i></button>
<button data-edit="formatBlock:p">P</button>
<button data-edit="formatBlock:H1">H1</button>
<button data-edit="insertUnorderedList">UL</button>
<button data-edit="justifyLeft">&#8676;</button>
<button data-edit="justifyRight">&#8677;</button>
<button data-edit="removeFormat">&times;</button>

<div contenteditable><p>Edit me!</p></div>

<script>
[].forEach.call(document.querySelectorAll("[data-edit]"), function(btn) {
  btn.addEventListener("click", edit, false);
});

function edit(event) {
  event.preventDefault();
  var cmd_val = this.dataset.edit.split(":");
  document.execCommand(cmd_val[0], false, cmd_val[1]);
}
<script>

jsFiddle演示
Basic Rich-Text编辑器示例（现代浏览器）

最终想法
即使存在很长时间(IE6)，execCommand不同浏览器的实现和行为也各不相同，这对于任何有经验的JavaScript开发人员来说，“构建功能齐全且跨浏览器兼容的所见即所得编辑器”都是一项艰巨的任务。
即使尚未完全标准化，您也可以在新的浏览器（例如Chrome，Firefox，Edge）上看到相当不错的结果。如果您需要对其他浏览器的更好支持以及诸如HTMLTable编辑之类的更多功能，经验法则是寻找一个已经存在且健壮的Rich-Text编辑器。