文件：execCommand() 方法

語法

execCommand(commandName, showDefaultUI, valueArgument)

引數

commandName

一個字串，指定要執行的命令的名稱。以下命令已指定。

backColor

更改文件的背景顏色。在 styleWithCss 模式下，它會影響包含塊的背景顏色。這需要將 <color> 值字串作為值引數傳遞。

bold

為選擇或插入點切換粗體開/關。

contentReadOnly

使內容文件為只讀或可編輯。這需要布林值 true/false 作為值引數。

copy

將當前選擇複製到剪貼簿。啟用此行為的條件因瀏覽器而異，並且隨著時間的推移而不斷演變。請檢視相容性表格以確定您是否可以在您的情況下使用它。

createLink

從選擇建立超連結，但僅當存在選擇時。需要一個 URI 字串作為超連結 href 的值引數。URI 必須至少包含一個字元，該字元可以是空格。

cut

刪除當前選擇並將其複製到剪貼簿。何時啟用此行為因瀏覽器而異，並且其條件隨著時間的推移而不斷演變。請檢視相容性表格以獲取使用詳情。

decreaseFontSize

在選擇或插入點周圍新增 <small> 標籤。

defaultParagraphSeparator

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

delete

刪除當前選擇。

enableAbsolutePositionEditor

啟用或停用允許絕對定位元素移動的抓取器。從 Firefox 64 開始，抓取器預設停用（Firefox bug 1490641）。

enableInlineTableEditing

啟用或停用表格行/列插入和刪除控制元件。從 Firefox 64 開始，這些控制元件預設停用（Firefox bug 1490641）。

enableObjectResizing

啟用或停用影像、表格、絕對定位元素和其他可調整大小物件上的調整大小手柄。從 Firefox 64 開始，這些手柄預設停用（Firefox bug 1490641）。

fontName

更改選擇或插入點的字型名稱。這需要一個字型名稱字串（如 "Arial"）作為值引數。

fontSize

更改選擇或插入點的字型大小。這需要一個介於 1 到 7 之間的整數作為值引數。

foreColor

更改選擇或插入點的字型顏色。這需要一個十六進位制顏色值字串作為值引數。

formatBlock

在包含當前選擇的行周圍新增一個 HTML 塊級元素，如果存在包含該行的塊元素，則替換它（在 Firefox 中，<blockquote> 是例外——它會包裝任何包含的塊級元素）。需要一個標籤名字串作為值引數。幾乎所有塊級元素都可以使用。（舊版 Edge 只支援標題標籤 H1 – H6、ADDRESS 和 PRE，它們必須用尖括號括起來，例如 "<H1>"。）

forwardDelete

刪除游標位置前面的字元，與按下 Windows 鍵盤上的 Delete 鍵相同。

heading

在選擇或插入點行周圍新增一個標題元素。需要標籤名字串作為值引數（即 "H1"、"H6"）。（Safari 不支援。）

highlightColor

更改選擇或插入點的背景顏色。需要顏色值字串作為值引數。為此功能，useCSS 必須為 true。

increaseFontSize

在選擇或插入點周圍新增 <big> 標籤。

indent

縮排包含選擇或插入點的行。在 Firefox 中，如果選擇跨越不同縮排級別的多行，則只縮排選擇中縮排最少的行。

insertBrOnReturn

控制回車鍵是插入 <br> 元素，還是將當前塊元素分成兩部分。

insertHorizontalRule

在插入點插入 <hr> 元素，或用它替換選擇。

insertHTML

在插入點插入 HTML 字串（刪除選擇）。需要一個有效的 HTML 字串作為值引數。

insertImage

在插入點插入影像（刪除選擇）。需要影像 src 的 URL 字串作為值引數。此字串的要求與 createLink 相同。

insertOrderedList

為選擇或插入點建立 編號有序列表。

insertUnorderedList

為選擇或插入點建立 專案符號無序列表。

insertParagraph

在選擇或當前行周圍插入一個段落。

insertText

在插入點插入給定的純文字（刪除選擇）。

italic

為選擇或插入點切換斜體開/關。

justifyCenter

將選擇或插入點居中。

justifyFull

使選擇或插入點兩端對齊。

justifyLeft

使選擇或插入點左對齊。

justifyRight

使選擇或插入點右對齊。

outdent

取消縮排包含選擇或插入點的行。

paste

在插入點貼上剪貼簿內容（替換當前選擇）。對於 Web 內容已停用。

redo

重做上一個撤消命令。

removeFormat

刪除當前選擇的所有格式。

selectAll

選擇可編輯區域的所有內容。

strikeThrough

為選擇或插入點切換刪除線開/關。

下標

為選擇或插入點切換下標開/關。

上標

為選擇或插入點切換上標開/關。

underline

為選擇或插入點切換下劃線開/關。

undo

撤消上次執行的命令。

unlink

從選定的超連結中刪除錨元素。

useCSS 已棄用

切換生成的標記使用 HTML 標籤還是 CSS。需要布林值 true/false 作為值引數。

注意：此引數的邏輯是反向的（即，使用 false 表示使用 CSS，使用 true 表示使用 HTML）。此引數已被棄用，推薦使用 styleWithCSS。

styleWithCSS

替換 useCSS 命令。true 修改/生成標記中的 style 屬性，false 生成表示元素。

AutoUrlDetect

更改瀏覽器的自動連結行為。

showDefaultUI

一個布林值，指示是否應顯示預設使用者介面。這在 Mozilla 中未實現。

valueArgument

對於需要輸入引數的命令，這是一個提供該資訊的字串。例如，insertImage 需要要插入影像的 URL。如果不需要引數，則指定 null。

返回值

如果命令不受支援或已停用，則為 false 的布林值。

示例

使用 insertText

此示例顯示了兩個非常基本的 HTML 編輯器，一個使用 <textarea> 元素，另一個使用設定了 contenteditable 屬性的 <pre> 元素。

單擊“粗體”或“斜體”按鈕會在元素中插入相應的標籤，使用 insertText 保留編輯歷史記錄，以便使用者可以撤消操作。

HTML

<h2>textarea</h2>

<div class="actions" data-for="textarea">
  <button data-el="b">Bold</button>
  <button data-el="i">Italic</button>
</div>

<textarea class="editarea">Some text.</textarea>

<h2>contenteditable</h2>

<div class="actions" data-for="pre">
  <button data-el="b">Bold</button>
  <button data-el="i">Italic</button>
</div>

<pre contenteditable="true" class="editarea">Some text.</pre>

JavaScript

// Prepare action buttons
const buttonContainers = document.querySelectorAll(".actions");

for (const buttonContainer of buttonContainers) {
  const buttons = buttonContainer.querySelectorAll("button");
  const pasteTarget = buttonContainer.getAttribute("data-for");

  for (const button of buttons) {
    const elementName = button.getAttribute("data-el");
    button.addEventListener("click", () =>
      insertText(`<${elementName}></${elementName}>`, pasteTarget),
    );
  }
}

// Inserts text at cursor, or replaces selected text
function insertText(newText, selector) {
  const textarea = document.querySelector(selector);
  textarea.focus();

  let pasted = true;
  try {
    if (!document.execCommand("insertText", false, newText)) {
      pasted = false;
    }
  } catch (e) {
    console.error("error caught:", e);
    pasted = false;
  }

  if (!pasted) {
    console.error("paste unsuccessful, execCommand not supported");
  }
}

結果

規範

此功能不屬於任何當前規範。它不再有望成為標準。有一個非官方的 W3C execCommand 規範草案。

瀏覽器相容性

另見

• Clipboard API
• MDN 示例：您的瀏覽器支援的 execCommand
• HTMLElement.contentEditable
• document.designMode
• document.queryCommandEnabled()
• document.queryCommandState()
• document.queryCommandSupported()