contenteditable 入门

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

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

原生富文本编辑

使用 JavaScriptexecCommand W3C, 你还可以将更多编辑功能传递给当前聚焦的 contenteditable 元素(特别是在插入位置或选择位置)。

execCommand 函数方法接受 3 个参数

document.execCommand(commandId, showUI, value)
  • commandId 字符串。从可用的** commandId ** s 列表中可以
    看到(参见: 参数 →commandId
  • showUI 布尔值(未实现。使用 false
  • value String 如果命令需要与命令相关的 String ,否则为 ""
    (参见: 参数 →值

使用 bold 命令formatBlock( 预期值为 )的示例 :

document.execCommand("bold", false, "");          // Make selected text bold
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 演示
基本 Rich-Text 编辑器示例(现代浏览器)

最后的想法
即使长期存在(IE6),execCommand 的实现和行为因浏览器而异,使得“构建功能齐全且跨浏览器兼容的 WYSIWYG 编辑器”对任何有经验的 JavaScript 开发人员来说都是一项艰巨的任务。
即使尚未完全标准化,你也可以在 Chrome,Firefox,Edge 等新版浏览器上获得相当不错的结果。如果你需要更好地支持其他浏览器以及 HTMLTable 编辑等更多功能,那么经验法则就是寻找已经存在且功能强大的 Rich-Text 编辑器。