Dokument: 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 betrifft es stattdessen die Hintergrundfarbe des umgebenden Blocks. Dies erfordert eine <color>-Wertzeichenkette, die als Wertargument übergeben wird.

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 für diese Funktion variieren je nach Browser und haben sich im Laufe der Zeit entwickelt. Überprüfen Sie die Kompatibilitätstabelle, um festzustellen, ob Sie es in Ihrem Fall verwenden können.

createLink

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

cut

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

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, der es erlaubt, absolut positionierte Elemente zu bewegen. Der Greifer ist standardmäßig seit Firefox 64 deaktiviert (Firefox-Bug 1490641).

enableInlineTableEditing

Aktiviert oder deaktiviert die Steuerelemente zur Zeilen-/Spalteneinfügung und -löschung für Tabellen. Die Steuerelemente sind standardmäßig seit Firefox 64 deaktiviert (Firefox-Bug 1490641).

enableObjectResizing

Aktiviert oder deaktiviert die Ziehpunkte auf Bildern, Tabellen und absolut positionierten Elementen und anderen veränderbaren Objekten. Die Ziehpunkte sind standardmäßig seit Firefox 64 deaktiviert (Firefox-Bug 1490641).

fontName

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

fontSize

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

foreColor

Ändert die Schriftfarbe für die Auswahl oder an der Einfügestelle. Dies erfordert eine Zeichenkette mit einem hexadezimalen Farbwert als Wertargument.

formatBlock

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

forwardDelete

Löscht das Zeichen vor der Cursor-Position, identisch mit der Betätigung der Löschen-Taste auf einer Windows-Tastatur.

heading

Fügt ein Überschriftenelement um eine Auswahl oder eine Zeile an der Einfügestelle hinzu. Erfordert die Tag-Name-Zeichenkette 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 eine Farbwert-Zeichenkette 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

Rückt die Zeile ein, die die Auswahl oder Einfügestelle enthält. In Firefox, wenn die Auswahl mehrere Zeilen mit unterschiedlichen Einrückungsebenen umfasst, werden nur die am wenigsten eingedruckten Zeilen in der Auswahl eingerückt.

insertBrOnReturn

Kontrolliert, 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 hinzu oder ersetzt die Auswahl durch dieses.

insertHTML

Fügt eine TrustedHTML-Instanz oder eine Zeichenkette aus HTML-Markup an der Einfügestelle ein (löscht Auswahl). Dies erfordert gültiges HTML-Markup.

Warnung: Die Eingabe wird als HTML geparst und in das DOM geschrieben. Solche APIs sind bekannt als Injection-Sinks und sind potenziell ein Vektor für Cross-Site-Scripting (XSS)-Angriffe, falls die Eingabe ursprünglich von einem Angreifer stammt.

Sie können dieses Risiko mindern, indem Sie stets TrustedHTML-Objekte statt Zeichenketten zuweisen und vertrauenswürdige Typen durchsetzen. Für mehr Informationen siehe die Trusted Types API.

insertImage

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

insertOrderedList

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

insertUnorderedList

Erstellt eine Aufzählungsliste für die Auswahl oder an der Einfügestelle.

insertParagraph

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

insertText

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

italic

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

justifyCenter

Zentriert die Auswahl oder Einfügestelle.

justifyFull

Blocksatzt die Auswahl oder Einfügestelle.

justifyLeft

Linksbündelt die Auswahl oder Einfügestelle.

justifyRight

Rechtsbündelt die Auswahl oder Einfügestelle.

outdent

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

paste

Fügt die Inhalte der Zwischenablage an der Einfügestelle ein (ersetzt aktuelle Auswahl).

Diese Funktion ist für Webinhalte als deaktiviert angegeben, wurde jedoch bei einigen Browsern über die Clipboard API implementiert. Auf diesen Browsern erfordert die Funktion eine flüchtige Aktivierung und eine Bestätigung der Popup-UI beim Einfügen von Inhalten aus einer anderen Quelle. Siehe die Browser-Kompatibilitätstabelle für weitere Informationen.

redo

Macht den vorherigen Rückgängig-Befehl rückgängig.

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 Tiefstellung für die Auswahl oder an der Einfügestelle ein/aus.

superscript

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

underline

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

undo

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

unlink

Entfernt das Ankerelement aus einem ausgewählten Hyperlink.

useCSS Veraltet

Schaltet die Verwendung von HTML-Tags oder CSS für das erzeugte Markup um. Erfordert einen booleschen true/false-Wert als Wertargument.

Hinweis: Dieses Argument ist logisch rückwärts (d.h. verwenden Sie false, um CSS zu verwenden, true, um HTML zu verwenden). Dies wurde zugunsten von styleWithCSS veraltet.

styleWithCSS

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

AutoUrlDetect

Ändert das automatische Verlinkungsverhalten 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 eine Zeichenkette, die diese Informationen 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 einfache HTML-Editoren, einen mit einem <textarea>-Element und einen mit einem <pre>-Element mit dem contenteditable-Attribut.

Das Klicken auf die Schaltflächen "Fett" oder "Kursiv" fügt die entsprechenden Tags in das Element ein, wobei insertText verwendet wird, um die Bearbeitungshistorie zu bewahren, 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

Verwendung von paste

Dieses Beispiel hat ein <textarea>-Element und ein <button>-Element, das Sie verwenden können, um Inhalte einzufügen.

HTML

<button id="paste">Paste</button>
<hr />
<textarea id="text_box">Some text.</textarea>

JavaScript

const pasteButton = document.querySelector("#paste");
const textBox = document.querySelector("#text_box");

pasteButton.addEventListener("click", () => {
  textBox.focus();

  let pasted = document.execCommand("paste", false);
  if (!pasted) {
    textBox.textContent = "paste unsuccessful, execCommand not supported";
  }
});

Ergebnis

In Browsern, die diese Funktion über die Clipboard API implementieren, sollten Sie in der Lage sein, gleichartigen Inhalt, wie Text aus dem Textbereich, zu kopieren und dann zum Ersetzen von ausgewähltem Inhalt einzufügen. Wenn Sie versuchen, Inhalte aus unterschiedlichen Quellen einzufügen, wie Text, der von einer anderen Seite oder einem anderen Ort kopiert wurde, müssen Sie zunächst die angezeigte "Einfügen"-Benutzeroberfläche auswählen.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

• Clipboard API
• MDN Beispiel: Von Ihrem Browser unterstützte execCommands
• HTMLElement.contentEditable
• document.designMode
• document.queryCommandEnabled()
• document.queryCommandState()
• document.queryCommandSupported()