docs.rodeo

MDN Web Docs mirror

Document: execCommand() method

{{ApiRef("DOM")}} {{deprecated_header}} 

[!NOTE] Although the execCommand() method is deprecated, there are still some valid use cases that do not yet have viable alternatives. For example, unlike direct DOM manipulation, modifications performed by execCommand() preserve the undo buffer (edit history). For these use cases, you can still use this method, but test to ensure cross-browser compatibility, such as by using {{domxref("document.queryCommandSupported()")}} .

The execCommand method implements multiple different commands. Some of them provide access to the clipboard, while others are for editing form inputs, contenteditable elements or entire documents (when switched to design mode).

To access the clipboard, the newer Clipboard API is recommended over execCommand().

Most commands affect the document’s selection. For example, some commands (bold, italics, etc.) format the currently selected text, while others delete the selection, insert new elements (replacing the selection) or affect an entire line (indenting). Only the currently active editable element can be modified, but some commands (e.g., copy) can work without an editable element.

[!NOTE] Modifications performed by execCommand() may or may not trigger {{domxref("Element/beforeinput_event", "beforeinput")}}  and {{domxref("Element/input_event", "input")}}  events, depending on the browser and configuration. If triggered, the handlers for the events will run before execCommand() returns. Authors need to be careful about such recursive calls, especially if they call execCommand() in response to these events. From Firefox 82, nested execCommand() calls will always fail, see bug 1634262.

Syntax

execCommand(commandName, showDefaultUI, valueArgument)

Parameters

Return value

A boolean value that is false if the command is unsupported or disabled.

[!NOTE] document.execCommand() only returns true if it is invoked as part of a user interaction. You can’t use it to verify browser support before calling a command.

Examples

Using insertText

This example shows two very basic HTML editors, one using a {{HTMLElement("textarea")}}  element and one using a {{HTMLElement("pre")}}  element with the contenteditable attribute set.

Clicking the “Bold” or “Italic” buttons inserts the appropriate tags in the element, using insertText to preserve the edit history, so the user can undo the action.

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");
  }
}

Result

{{EmbedLiveSample("Using insertText", 100, 300)}} 

Specifications

This feature is not part of any current specification. It is no longer on track to become a standard. There is an unofficial W3C execCommand spec draft.

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN