Dokumentation: execCommand()-Methode

Syntax

execCommand(commandName, showDefaultUI, valueArgument)

Parameter

commandName

Ein String, der den Namen des auszuführenden Befehls angibt. Die folgenden Befehle sind spezifiziert:

backColor

Ändert die Hintergrundfarbe des Dokuments. Im styleWithCss-Modus wirkt sich dies stattdessen auf die Hintergrundfarbe des umgebenden Blocks aus. Dies erfordert einen Wert als <color>-Wertstring.

bold

Schaltet Fett für die Auswahl oder an der Einfügestelle ein/aus.

contentReadOnly

Macht das Inhaltsdokument entweder schreibgeschützt oder bearbeitbar. Dies erfordert einen booleschen true/false-Wert als Argument.

copy

Kopiert die aktuelle Auswahl in die Zwischenablage. Die Bedingungen, unter denen dieses Verhalten aktiviert ist, variieren von Browser zu Browser und haben sich im Laufe der Zeit entwickelt. Überprüfen Sie die Kompatibilitätstabelle, um festzustellen, ob Sie sie in Ihrem Fall verwenden können.

createLink

Erstellt einen Hyperlink aus der Auswahl, aber nur wenn eine Auswahl vorhanden ist. Erfordert einen URI-String als Wertargument für das href des Hyperlinks. Der URI muss mindestens ein Zeichen enthalten, das auch ein Leerzeichen sein kann.

cut

Entfernt die aktuelle Auswahl und kopiert sie in die Zwischenablage. Wann dieses Verhalten aktiviert ist, variiert zwischen Browsern, und seine Bedingungen haben sich im Laufe der Zeit entwickelt. Überprüfen Sie die Kompatibilitätstabelle für Nutzungsdetails.

decreaseFontSize

Fügt ein <small>-Tag um die Auswahl oder an der Einfügestelle hinzu.

defaultParagraphSeparator

Ändert den Absatztrenner, der verwendet wird, wenn neue Absätze in bearbeitbaren Textbereichen erstellt werden.

delete

Löscht die aktuelle Auswahl.

enableAbsolutePositionEditor

Aktiviert oder deaktiviert den Greifer, mit dem absolut positionierte Elemente verschoben werden können. Der Greifer ist standardmäßig deaktiviert seit Firefox 64 (Firefox-Bug 1490641).

enableInlineTableEditing

Aktiviert oder deaktiviert die Tabellenzeilen-/Spalteneinfüge- und -löschsteuerungen. Die Steuerungen sind seit Firefox 64 standardmäßig deaktiviert (Firefox-Bug 1490641).

enableObjectResizing

Aktiviert oder deaktiviert die Größenänderungsgriffe bei Bildern, Tabellen und absolut positionierten Elementen sowie anderen Größen änderbaren Objekten. Die Griffe sind seit Firefox 64 standardmäßig deaktiviert (Firefox-Bug 1490641).

fontName

Ändert den Schriftartnamen für die Auswahl oder an der Einfügestelle. Dies erfordert einen Schriftartnamen-String (wie "Arial") als Wertargument.

fontSize

Ändert die Schriftgröße für die Auswahl oder an der Einfügestelle. Dies erfordert eine ganze Zahl von 1 - 7 als Wertargument.

foreColor

Ändert eine Schriftfarbe für die Auswahl oder an der Einfügestelle. Dies erfordert einen hexadezimalen Farbwert-String als Wertargument.

formatBlock

Fügt ein HTML-Block-Level-Element um die Zeile ein, die die aktuelle Auswahl enthält, und ersetzt das Blockelement, das die Zeile enthält, falls vorhanden (in Firefox, <blockquote> ist die Ausnahme — es wird jedes enthaltene Blockelement umschließen). Erfordert einen Tag-Name-String als Wertargument. Praktisch alle Block-Level-Elemente können verwendet werden. (Legacy Edge unterstützt nur Heading-Tags H1 – H6, ADDRESS und PRE, die in spitze Klammern eingeschlossen sein müssen, wie "<H1>".)

forwardDelete

Löscht das Zeichen vor der Position des Cursors, identisch mit dem Drücken der Entf-Taste auf einer Windows-Tastatur.

heading

Fügt ein Überschriftselement um eine Auswahl oder Einfügestellenzeile hinzu. Erfordert den Tag-Name-String als Wertargument (z. B. "H1", "H6"). (Nicht von Safari unterstützt.)

highlightColor

Ändert die Hintergrundfarbe für die Auswahl oder an der Einfügestelle. Erfordert einen Farbwert-String als Wertargument. useCSS muss true sein, damit dies funktioniert.

increaseFontSize

Fügt ein <big>-Tag um die Auswahl oder an der Einfügestelle hinzu.

indent

Einrücken der Zeile, die die Auswahl oder Einfügestelle enthält. In Firefox, wenn die Auswahl mehrere Zeilen auf unterschiedlichen Ebenen der Einrückung umfasst, werden nur die am wenigsten eingerückten Zeilen in der Auswahl eingerückt.

insertBrOnReturn

Steuert, ob die Eingabetaste ein <br>-Element einfügt oder das aktuelle Blockelement in zwei Teile teilt.

insertHorizontalRule

Fügt ein <hr>-Element an der Einfügestelle ein oder ersetzt die Auswahl.

insertHTML

Fügt einen HTML-String an der Einfügestelle ein (löscht Auswahl). Erfordert einen gültigen HTML-String als Wertargument.

insertImage

Fügt ein Bild an der Einfügestelle ein (löscht Auswahl). Erfordert einen URL-String für das src des Bildes als Wertargument. Die Anforderungen für diesen String sind die gleichen wie für createLink.

insertOrderedList

Erstellt eine nummerierte geordnete Liste für die Auswahl oder an der Einfügestelle.

insertUnorderedList

Erstellt eine punktierte ungeordnete Liste für die Auswahl oder an der Einfügestelle.

insertParagraph

Fügt einen Absatz um die Auswahl oder die aktuelle Zeile ein.

insertText

Fügt den gegebenen Klartext an der Einfügestelle ein (löscht Auswahl).

italic

Schaltet Kursiv für die Auswahl oder an der Einfügestelle ein/aus.

justifyCenter

Zentriert die Auswahl oder Einfügestelle.

justifyFull

Rechtfertigt die Auswahl oder Einfügestelle vollständig.

justifyLeft

Richtet die Auswahl oder Einfügestelle linksbündig aus.

justifyRight

Richtet die Auswahl oder Einfügestelle rechtsbündig aus.

outdent

Verringert die Einrückung der Zeile, die die Auswahl oder Einfügestelle enthält.

paste

Fügt den Inhalt der Zwischenablage an der Einfügestelle ein (ersetzt die aktuelle Auswahl). Deaktiviert für Web-Inhalte.

redo

Wiederherstellt den vorherigen Rückgängig-Befehl.

removeFormat

Entfernt alle Formatierungen aus der aktuellen Auswahl.

selectAll

Wählt den gesamten Inhalt des bearbeitbaren Bereichs aus.

strikeThrough

Schaltet Durchstreichen für die Auswahl oder an der Einfügestelle ein/aus.

subscript

Schaltet tiefgestellt an/aus für die Auswahl oder an der Einfügestelle.

superscript

Schaltet hochgestellt an/aus für die Auswahl oder an der Einfügestelle.

underline

Schaltet Unterstreichen an/aus für die Auswahl oder an der Einfügestelle.

undo

Macht den zuletzt ausgeführten Befehl rückgängig.

unlink

Entfernt das Ankersymbol von einem ausgewählten Hyperlink.

useCSS Veraltet

Schaltet die Verwendung von HTML-Tags oder CSS für das generierte Markup um. Erfordert ein boolesches true/false-Wertargument.

Hinweis: Dieses Argument ist logisch rückwärts (das heißt, verwenden Sie false für die Verwendung von CSS, true für die Verwendung von HTML). Dies wurde zugunsten von styleWithCSS veraltet.

styleWithCSS

Ersetzt den useCSS-Befehl. true ändert/generiert style-Attribute im Markup, false generiert präsentationale Elemente.

AutoUrlDetect

Ändert das automatische Verknüpfungsverhalten des Browsers.

showDefaultUI

Ein boolescher Wert, der angibt, ob die Standardbenutzeroberfläche angezeigt werden soll. Dies ist in Mozilla nicht implementiert.

valueArgument

Für Befehle, die ein Eingabeargument erfordern, ist ein String, der diese Information bereitstellt. Zum Beispiel erfordert insertImage die URL des einzufügenden Bildes. Geben Sie null an, wenn kein Argument benötigt wird.

Rückgabewert

Ein boolescher Wert, der false ist, wenn der Befehl nicht unterstützt oder deaktiviert ist.

Beispiele

Verwendung von insertText

Dieses Beispiel zeigt zwei sehr grundlegende HTML-Editoren, einen unter Verwendung eines <textarea>-Elements und einen unter Verwendung eines <pre>-Elements mit dem Attribut contenteditable.

Ein Klick auf die Schaltflächen "Fett" oder "Kursiv" fügt die entsprechenden Tags in das Element ein, wobei insertText verwendet wird, um den Bearbeitungsverlauf zu erhalten, sodass der Benutzer die Aktion rückgängig machen kann.

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

Ergebnis

Spezifikationen

Diese Funktion ist Teil keiner aktuellen Spezifikation. Sie ist nicht mehr auf dem Weg, ein Standard zu werden. Es gibt einen inoffiziellen W3C execCommand Spezifikationsentwurf.

Browser-Kompatibilität

Siehe auch

• Clipboard API
• MDN Beispiel: execCommands supported in your browser
• HTMLElement.contentEditable
• document.designMode
• document.queryCommandEnabled()
• document.queryCommandState()
• document.queryCommandSupported()