JavaScript 入门
示例
HTML属性contenteditable提供了一种将HTML元素变成用户可编辑区域的简单方法
<div contenteditable>You can <b>edit</b> me!</div>
本机富文本编辑
使用JavaScript和execCommandW3C，您还可以将更多的编辑功能传递给当前关注的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">⇤</button>
<button data-edit="justifyRight">⇥</button>
<button data-edit="removeFormat">×</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演示
BasicRich-Text编辑器示例（现代浏览器）
最终想法
即使存在很长时间(IE6)，execCommand不同浏览器的实现和行为也各不相同，这对于任何有经验的JavaScript开发人员来说，“构建功能齐全且跨浏览器兼容的所见即所得编辑器”都是一项艰巨的任务。
即使尚未完全标准化，您也可以在新的浏览器（例如Chrome，Firefox，Edge）上看到相当不错的结果。如果您需要对其他浏览器的更好支持以及诸如HTMLTable编辑之类的更多功能，经验法则是寻找一个已经存在且健壮的Rich-Text编辑器。