文档：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()