一瞳秽、document.execCommand()

從其名字上可以看出execCommand()是用來執(zhí)行命令的奖亚，當(dāng)一個HTML文檔切換到設(shè)計模式時羔沙，document暴露 execCommand方法揪阿，該方法允許運行命令來操縱可編輯內(nèi)容區(qū)域的元素雁仲。如保存文件仔夺、打開新文件、撤消攒砖、重做缸兔、剪切、復(fù)制吹艇、刪除惰蜜，字體大小、背景顏色等操作受神，有了這個方法就可以很容易的實現(xiàn)網(wǎng)頁中的文本編輯器

【1】語法

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

【2】參數(shù)

• aCommandName：命令名稱
• aShowDefaultUI：交互方式抛猖， Boolean值，true的話將顯示對話框鼻听，如果為false的話财著，則不顯示對話框，一般為 false
• aValueArgument：動態(tài)參數(shù)撑碴，例如：插入圖片需要額外的參數(shù)（image 的 url）撑教，默認(rèn)為null

【3】返回值

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

二醉拓、命令

【1】backColor

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

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

【2】bold

開啟或關(guān)閉選中文字或插入點的粗體字效果恐似。IE瀏覽器使用 <strong>標(biāo)簽，而不是<b>標(biāo)簽傍念。

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

【3】copy

拷貝當(dāng)前選中內(nèi)容到剪貼板。啟用這個功能的條件因瀏覽器不同而不同葛闷，而且不同時期憋槐，其啟用條件也不盡相同。使用之前請檢查瀏覽器兼容表淑趾，以確定是否可用阳仔。

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

【4】createLink

將選中內(nèi)容創(chuàng)建為一個錨鏈接。這個命令需要一個hrefURI字符串作為參數(shù)值傳入。URI必須包含至少一個字符近范，例如一個空格嘶摊。（瀏覽器會創(chuàng)建一個空鏈接）

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

【5】cut

剪貼當(dāng)前選中的文字并復(fù)制到剪貼板。啟用這個功能的條件因瀏覽器不同而不同评矩，而且不同時期叶堆，其啟用條件也不盡相同。使用之前請檢查瀏覽器兼容表斥杜，以確定是否可用虱颗。

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

【6】ClearAuthenticationCache

清除緩存中的所有身份驗證憑據(jù)。

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

【7】contentReadOnly

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

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

【8】decreaseFontSize

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

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

【9】delete

刪除選中部分.

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

【10】defaultParagraphSeparator

更改在可編輯文本區(qū)域中創(chuàng)建新段落時使用的段落分隔符缰儿。

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

【11】enableAbsolutePositionEditor

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

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

【12】enableInlineTableEditing

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

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

【13】enableObjectResizing

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

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

【14】fontName

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

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

【15】fontSize

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

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

【16】foreColor

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

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

【17】formatBlock

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

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

【18】forwardDelete

刪除光標(biāo)所在位置的字符椅棺。 和按下刪除鍵一樣。

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

【19】heading

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

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

【20】hiliteColor

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

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

【21】increaseFontSize

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

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

【23】indent

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

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

【24】insertBrOnReturn

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

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

【25】insertHorizontalRule

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

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

【26】insertHTML

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

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

【27】insertImage

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

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

【28】insertOrderedList

在插入點或者選中文字上創(chuàng)建一個有序列表

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

【29】insertUnorderedList

在插入點或者選中文字上創(chuàng)建一個無序列表华蜒。

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

【30】insertParagraph

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

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

【31】insertText

在光標(biāo)插入位置插入文本內(nèi)容或者覆蓋所選的文本內(nèi)容。

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

【32】italic

在光標(biāo)插入點開啟或關(guān)閉斜體字叭喜。 (Internet Explorer 使用 EM 標(biāo)簽贺拣，而不是 I )

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

【33】justifyCenter

對光標(biāo)插入位置或者所選內(nèi)容進行文字居中。

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

【34】justifyFull

對光標(biāo)插入位置或者所選內(nèi)容進行文本對齊域滥。

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

【35】justifyLeft

對光標(biāo)插入位置或者所選內(nèi)容進行左對齊纵柿。

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

【36】justifyRight

對光標(biāo)插入位置或者所選內(nèi)容進行右對齊。

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

【37】outdent

對光標(biāo)插入行或者所選行內(nèi)容減少縮進量启绰。

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

【38】paste

在光標(biāo)位置粘貼剪貼板的內(nèi)容昂儒，如果有被選中的內(nèi)容，會被替換

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

【39】redo

重做被撤銷的操作委可。

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

【40】removeFormat

對所選內(nèi)容去除所有格式

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

【41】selectAll

選中編輯區(qū)里的全部內(nèi)容渊跋。

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

【42】strikeThrough

在光標(biāo)插入點開啟或關(guān)閉刪除線。

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

【43】subscript

在光標(biāo)插入點開啟或關(guān)閉下角標(biāo)着倾。

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

【44】superscript

在光標(biāo)插入點開啟或關(guān)閉上角標(biāo)拾酝。

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

【45】underline

在光標(biāo)插入點開啟或關(guān)閉下劃線。

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

【46】undo

撤銷最近執(zhí)行的命令卡者。

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

【47】unlink

去除所選的錨鏈接的<a>標(biāo)簽

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="恢復(fù)">恢復(fù)</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');
      //設(shè)置事件監(jiān)聽
      butGroup.addEventListener('click', function (e) {
        //通過e 事件 獲取點擊的標(biāo)簽 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
        }
      })

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

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

      // 恢復(fù)
      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>

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