一、document.execCommand()

從其名字上可以看出execCommand()是用來執行命令的，當一個HTML文檔切換到設計模式時，document暴露 execCommand方法，該方法允許運行命令來操縱可編輯內容區域的元素。如保存文件、打開新文件、撤消、重做、剪切、復制、刪除，字體大小、背景顏色等操作，有了這個方法就可以很容易的實現網頁中的文本編輯器

【1】語法

let bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

【2】參數

• aCommandName：命令名稱
• aShowDefaultUI：交互方式， Boolean值，true的話將顯示對話框，如果為false的話，則不顯示對話框，一般為 false
• aValueArgument：動態參數，例如：插入圖片需要額外的參數（image 的 url），默認為null

【3】返回值

返回一個布爾值Boolen，如果是 false 則表示操作不被支持或未被啟用

二、命令

【1】backColor

修改文檔的背景顏色。在styleWithCss模式下，則只影響容器元素的背景顏色。這需要一個<color> 類型的字符串值作為參數傳入。注意，IE瀏覽器用這個設置文字的背景顏色。

document.execCommand('BackColor', 'false', sColor);

【2】bold

開啟或關閉選中文字或插入點的粗體字效果。IE瀏覽器使用 <strong>標簽，而不是<b>標簽。

document.execCommand('Bold', 'false', null);

【3】copy

拷貝當前選中內容到剪貼板。啟用這個功能的條件因瀏覽器不同而不同，而且不同時期，其啟用條件也不盡相同。使用之前請檢查瀏覽器兼容表，以確定是否可用。

document.execCommand('Copy', 'false', null );

【4】createLink

將選中內容創建為一個錨鏈接。這個命令需要一個hrefURI字符串作為參數值傳入。URI必須包含至少一個字符，例如一個空格。（瀏覽器會創建一個空鏈接）

document.execCommand('CreateLink', 'false', sLinkURL);

【5】cut

剪貼當前選中的文字并復制到剪貼板。啟用這個功能的條件因瀏覽器不同而不同，而且不同時期，其啟用條件也不盡相同。使用之前請檢查瀏覽器兼容表，以確定是否可用。

document.execCommand('Cut', 'false', null);

【6】ClearAuthenticationCache

清除緩存中的所有身份驗證憑據。

document.execCommand('ClearAuthenticationCache', 'false', null);

【7】contentReadOnly

通過傳入一個布爾類型的參數來使能文檔內容的可編輯性。(IE瀏覽器不支持)

document.execCommand('contentReadOnly', 'false', sBoolen);

【8】decreaseFontSize

給選中文字加上 <small> 標簽，或在選中點插入該標簽。(IE瀏覽器不支持)

document.execCommand('decreaseFontSize', 'false', null);

【9】delete

刪除選中部分.

document.execCommand('delete', 'false', null);

【10】defaultParagraphSeparator

更改在可編輯文本區域中創建新段落時使用的段落分隔符。

document.execCommand('defaultParagraphSeparator', 'false', 'br');

【11】enableAbsolutePositionEditor

啟用或禁用允許移動絕對定位元素的抓取器。Firefox 63 Beta/Dev Edition 默認禁用此功能(bug 1449564)。

document.execCommand('enableAbsolutePositionEditor', 'false', null);

【12】enableInlineTableEditing

啟用或禁用表格行和列插入和刪除控件。(IE瀏覽器不支持)

document.execCommand('enableInlineTableEditing', 'false', null);

【13】enableObjectResizing

啟用或禁用圖像和其他對象的大小可調整大小手柄。(IE瀏覽器不支持)

document.execCommand('enableObjectResizing', 'false', null);

【14】fontName

在插入點或者選中文字部分修改字體名稱. 需要提供一個字體名稱字符串 (例如："Arial")作為參數。

document.execCommand('fontName', 'false', sFontName);

【15】fontSize

在插入點或者選中文字部分修改字體大小. 需要提供一個HTML字體尺寸 (1-7) 作為參數。

document.execCommand('fontSize', 'false', sFontSize);

【16】foreColor

在插入點或者選中文字部分修改字體顏色. 需要提供一個顏色值字符串作為參數。

document.execCommand('foreColor', 'false', sForeColor);

【17】formatBlock

添加一個HTML塊式標簽在包含當前選擇的行, 如果已經存在了，更換包含該行的塊元素 (在 Firefox中, BLOCKQUOTE 是一個例外 -它將包含任何包含塊元素). 需要提供一個標簽名稱字符串作為參數。幾乎所有的塊樣式標簽都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE"). (IE瀏覽器僅僅支持標題標簽 H1 - H6, ADDRESS, 和 PRE,使用時還必須包含標簽分隔符 < >, 例如 "<H1>".)

document.execCommand('formatBlock', 'false', sTagName);

【18】forwardDelete

刪除光標所在位置的字符。 和按下刪除鍵一樣。

document.execCommand('forwardDelete', 'false', null );

【19】heading

添加一個標題標簽在光標處或者所選文字上。 需要提供標簽名稱字符串作為參數 (例如. "H1", "H6"). (IE 和 Safari不支持)

document.execCommand('heading', 'false', sTagName);

【20】hiliteColor

更改選擇或插入點的背景顏色。需要一個顏色值字符串作為值參數傳遞。 UseCSS 必須開啟此功能。(IE瀏覽器不支持)

document.execCommand('hiliteColor', 'false', sHiliteColor);

【21】increaseFontSize

在選擇或插入點周圍添加一個BIG標簽。(IE瀏覽器不支持)

document.execCommand('increaseFontSize', 'false', null );

【23】indent

縮進選擇或插入點所在的行， 在 Firefox 中, 如果選擇多行，但是這些行存在不同級別的縮進, 只有縮進最少的行被縮進。

document.execCommand('indent', 'false', null );

【24】insertBrOnReturn

控制當按下Enter鍵時，是插入 br 標簽還是把當前塊元素變成兩個。(IE瀏覽器不支持)

document.execCommand('insertBrOnReturn', 'false', null );

【25】insertHorizontalRule

在插入點插入一個水平線（刪除選中的部分）

document.execCommand('insertHorizontalRule', 'false', null );

【26】insertHTML

在插入點插入一個HTML字符串（刪除選中的部分）。需要一個個HTML字符串作為參數。(IE瀏覽器不支持)

document.execCommand('insertHTML', 'false', sTagName);

【27】insertImage

在插入點插入一張圖片（刪除選中的部分）。需要一個 URL 字符串作為參數。這個 URL 圖片地址至少包含一個字符。空白字符也可以（IE會創建一個鏈接其值為null）

document.execCommand('insertImage', 'false', sURL);

【28】insertOrderedList

在插入點或者選中文字上創建一個有序列表

document.execCommand('insertOrderedList', 'false', null );

【29】insertUnorderedList

在插入點或者選中文字上創建一個無序列表。

document.execCommand('insertUnorderedList', 'false', null );

【30】insertParagraph

在選擇或當前行周圍插入一個段落。(IE會在插入點插入一個段落并刪除選中的部分.)

document.execCommand('insertParagraph', 'false', null );

【31】insertText

在光標插入位置插入文本內容或者覆蓋所選的文本內容。

document.execCommand('insertText', 'false', sText);

【32】italic

在光標插入點開啟或關閉斜體字。 (Internet Explorer 使用 EM 標簽，而不是 I )

document.execCommand('italic', 'false', null );

【33】justifyCenter

對光標插入位置或者所選內容進行文字居中。

document.execCommand('justifyCenter', 'false', null );

【34】justifyFull

對光標插入位置或者所選內容進行文本對齊。

document.execCommand('justifyFull', 'false', null );

【35】justifyLeft

對光標插入位置或者所選內容進行左對齊。

document.execCommand('justifyLeft', 'false', null );

【36】justifyRight

對光標插入位置或者所選內容進行右對齊。

document.execCommand('justifyRight', 'false', null );

【37】outdent

對光標插入行或者所選行內容減少縮進量。

document.execCommand('outdent', 'false', null );

【38】paste

在光標位置粘貼剪貼板的內容，如果有被選中的內容，會被替換

document.execCommand('paste', 'false', null );

【39】redo

重做被撤銷的操作。

document.execCommand('redo', 'false', null );

【40】removeFormat

對所選內容去除所有格式

document.execCommand('removeFormat', 'false', null );

【41】selectAll

選中編輯區里的全部內容。

document.execCommand('selectAll', 'false', null);

【42】strikeThrough

在光標插入點開啟或關閉刪除線。

document.execCommand('strikeThrough', 'false', null);

【43】subscript

在光標插入點開啟或關閉下角標。

document.execCommand('subscript', 'false', null);

【44】superscript

在光標插入點開啟或關閉上角標。

document.execCommand('superscript', 'false', null);

【45】underline

在光標插入點開啟或關閉下劃線。

document.execCommand('underline', 'false', null);

【46】undo

撤銷最近執行的命令。

document.execCommand('undo', 'false', null);

【47】unlink

去除所選的錨鏈接的<a>標簽

document.execCommand('unlink', 'false', null);

三、簡單的富文本編輯器

【1】效果

【2】代碼

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div class="wrap">
    <div id="butGroup">
      <button id="undo" :title="撤銷">撤銷</button>
      <button id="redo" :title="恢復">恢復</button>
      <button id="bold" :title="加粗">加粗</button>
      <button id="italic">傾斜</button>
      <button id="underline">下劃線</button>
      <button id="strikeThrough">刪除線</button>
      <button id="h1">H1</button>
      <button id="h2">H2</button>
      <button id="h3">H3</button>
      <button id="foreColor">字體顏色</button>
      <button id="hiliteColor">字體背景</button>
      <button id="insertOrderedList">有序</button>
      <button id="insertUnorderedList">無序</button>
      <button id="save">提交</button>
    </div>
    <iframe id='HtmlEdit' style="width:800px; height: 400px" marginWidth='10px' marginHeight='10px'></iframe>
  </div>

  <div id="box" style="height: 400px;width: 800px;border: 1px solid black">
  </div>

  <script language="javascript">
    window.onload = function () {
      let editor = document.getElementById("HtmlEdit").contentWindow;//獲取iframe Window 對象
      let doc = document.getElementById("HtmlEdit").contentDocument; //獲取iframe documen 對象
      let butGroup = document.getElementById('butGroup');
      let box = document.getElementById('box');
      //設置事件監聽
      butGroup.addEventListener('click', function (e) {
        //通過e 事件 獲取點擊的標簽 id
        switch (e.target.id) {
          case 'undo': undo(); break;
          case 'redo': redo(); break;
          case 'bold': bold(); break;
          case 'copy': copy(); break;
          case 'italic': italic(); break
          case 'underline': underline(); break;
          case 'strikeThrough': strikeThrough(); break;
          case 'h1': h1(); break;
          case 'h2': h2(); break;
          case 'h3': h3(); break;
          case 'foreColor': foreColor(); break;
          case 'hiliteColor': hiliteColor(); break;
          case 'insertOrderedList': insertOrderedList(); break;
          case 'insertUnorderedList': insertUnorderedList(); break;
          case 'save': save(); break
        }
      })

      //只需鍵入以下設定，iframe立刻變成編輯器。
      editor.document.designMode = 'On';  //打開設計模式
      editor.document.contentEditable = true;// 設置元素為可編輯

      // 撤銷
      let undo = () => { editor.document.execCommand('undo', false, null) }

      // 恢復
      let redo = () => { editor.document.execCommand('redo', false, null) }

      // 加粗
      let bold = () => { editor.document.execCommand('bold', false, null) }

      // 斜體
      let italic = () => { editor.document.execCommand('italic', false, null) }

      // 下劃線
      let underline = () => { editor.document.execCommand('underline', false, null) }

      // 刪除線
      let strikeThrough = () => { editor.document.execCommand('strikeThrough', false, null) }

      // H1
      let h1 = () => { editor.document.execCommand('fontSize', false, 7) }

      // H2
      let h2 = () => { editor.document.execCommand('fontSize', false, 6) }

      // H3
      let h3 = () => { editor.document.execCommand('fontSize', false, 5) }

      // 字體顏色
      let foreColor = () => { editor.document.execCommand('foreColor', false, 'red') }

      // 字體背景
      let hiliteColor = () => { editor.document.execCommand('hiliteColor', false, 'yellow') }

      // 有序列表
      let insertOrderedList = () => { editor.document.execCommand('insertOrderedList', false, null) }

      // 無序列表
      let insertUnorderedList = () => { editor.document.execCommand('insertUnorderedList', false, null) }

      // 提交
      let save = () => { box.innerHTML = doc.body.innerHTML }
    }
  </script>
</body>

</html>

文章每周持續更新，可以微信搜索「 前端大集錦 」第一時間閱讀，回復【視頻】【書籍】領取200G視頻資料和30本PDF書籍資料