Document: execCommand() 方法

aCommandName

指定要执行的命令名称的字符串。以下命令已指定

backColor

更改文档背景颜色。在 styleWithCss 模式下，它会影响包含块的背景颜色。这需要将 <color> 值字符串作为值参数传递。

bold

为选择或插入点切换粗体开/关。

contentReadOnly

使内容文档变为只读或可编辑。这需要将布尔值 true/false 作为值参数。

copy

将当前选择复制到剪贴板。启用此行为的条件因浏览器而异，并且随着时间的推移而演变。查看兼容性表以确定您是否可以在您的情况下使用它。

createLink

从选择创建超链接，但前提是存在选择。需要 URI 字符串作为超链接的 href 值参数。URI 必须至少包含一个字符，可以是空格。

cut

删除当前选择并将其复制到剪贴板。此行为何时启用因浏览器而异，其条件随着时间的推移而演变。查看 兼容性表 以了解使用详细信息。

decreaseFontSize

在选择或插入点周围添加 <small> 标签。

defaultParagraphSeparator

更改在可编辑文本区域中创建新段落时使用的段落分隔符。

delete

删除当前选择。

enableAbsolutePositionEditor

启用或禁用允许绝对定位的元素移动的抓取器。从 Firefox 64 开始，默认情况下禁用抓取器 (Firefox 错误 1490641)。

enableInlineTableEditing

启用或禁用表格行/列插入和删除控件。从 Firefox 64 开始，默认情况下禁用这些控件 (Firefox 错误 1490641)。

enableObjectResizing

启用或禁用图像、表格和绝对定位元素以及其他可调整大小的对象上的调整大小句柄。从 Firefox 64 开始，默认情况下禁用这些句柄 (Firefox 错误 1490641)。

fontName

更改选择或插入点的字体名称。这需要将字体名称字符串（如 "Arial"）作为值参数传递。

fontSize

更改选择或插入点的字体大小。这需要将 1 - 7 之间的整数作为值参数传递。

foreColor

更改选择或插入点的字体颜色。这需要将十六进制颜色值字符串作为值参数传递。

formatBlock

在包含当前选择的行的周围添加 HTML 块级元素，如果存在，则替换包含该行的块元素（在 Firefox 中，<blockquote> 是例外——它将包装任何包含块元素）。需要将标签名称字符串作为值参数传递。实际上可以使用所有块级元素。(旧版 Edge 只支持标题标签 H1 – H6、ADDRESS 和 PRE，这些标签必须用尖括号括起来，例如 "<H1>")。

forwardDelete

删除 光标 位置前面的字符，与在 Windows 键盘上按下 Delete 键相同。

heading

在选择或插入点行周围添加标题元素。需要将标签名称字符串作为值参数传递（即 "H1"、"H6"）。(Safari 不支持)。

hiliteColor

更改选择或插入点的背景颜色。需要将颜色值字符串作为值参数传递。useCSS 必须为 true 才能正常工作。

increaseFontSize

在选择或插入点周围添加 <big> 标签。

indent

缩进包含选择或插入点的行。在 Firefox 中，如果选择跨越不同缩进级别的多行，则仅选择中缩进最小的行将被缩进。

insertBrOnReturn

控制 Enter 键是插入 <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

为选择或插入点切换删除线开/关。

subscript

为选择或插入点切换 下标 开/关。

superscript

为选择或插入点切换 上标 开/关。

underline

为选择或插入点切换 下划线 开/关。

undo

撤消上一个执行的命令。

unlink

从选定的超链接中删除 锚元素。

useCSS 已弃用

切换使用 HTML 标签或 CSS 来生成标记。需要将布尔值 true/false 作为值参数传递。

注意： 此参数在逻辑上是相反的（即，使用 false 来使用 CSS，使用 true 来使用 HTML）。此功能已弃用，取而代之的是 styleWithCSS。

styleWithCSS

替换 useCSS 命令。true 会在标记中修改/生成 style 属性，false 会生成表示性元素。

AutoUrlDetect

更改浏览器自动链接行为。

aShowDefaultUI

一个布尔值，指示是否应显示默认用户界面。在 Mozilla 中未实现此功能。

aValueArgument

对于需要输入参数的命令，是一个字符串，提供该信息。例如，insertImage 需要要插入的图像的 URL。如果不需要参数，请指定 null。

如果命令不受支持或已禁用，则为 false 的布尔值。

有关 如何在 CodePen 上使用带有 contentEditable 元素的 execCommand 的示例。

此示例展示了两个非常基本的 HTML 编辑器，一个使用 <textarea> 元素，另一个使用 <pre> 元素，并设置了 contenteditable 属性。

单击“粗体”或“斜体”按钮会在元素中插入相应的标签，使用 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");
  }
}

结果

此功能不是任何当前规范的一部分，但有一个 非正式草案 试图对其进行规范。

• 剪贴板 API
• HTMLElement.contentEditable
• document.designMode