contenteditable 入門

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 ** 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 編輯器。