Suche…
Syntax
- Bool unterstützt = document.execCommand (Befehlsname, showDefaultUI, valueArgument)
Parameter
| commandId | Wert |
|---|---|
| ⋮ Inline-Formatierungsbefehle | |
| Hintergrundfarbe | Farbwert String |
| Fett gedruckt | |
| Link erstellen | URL-String |
| Schriftartenname | Name der Schriftfamilie |
| Schriftgröße | 1, 2, 3, 4, 5, 6, 7 |
| Vordergrundfarbe | Farbwert String |
| Durchschlag | |
| hochgestellt | |
| Verknüpfung aufheben | |
| ⋮ Blockierungsbefehle blockieren | |
| löschen | |
| formatBlock | "address", "dd", "div", "dt", "h1", "h2", "h3", "h4", "h5", "h6", "p", "pre" |
| vorwärts löschen | |
| insertHorizontalRule | |
| insertHTML | HTML-String |
| Bild einfügen | URL-String |
| insertLineBreak | |
| insertOrderedList | |
| insertAbsatz | |
| insertText | Textzeichenfolge |
| insertUnorderedList | |
| justifyCenter | |
| justifyFull | |
| justifyLeft | |
| justifyRight | |
| herausragen | |
| ⋮ Befehle der Zwischenablage | |
| Kopieren | Derzeit ausgewählte Zeichenfolge |
| Schnitt | Derzeit ausgewählte Zeichenfolge |
| Einfügen | |
| ⋮ Verschiedene Befehle | |
| defaultParagraphSeparator | |
| Wiederholen | |
| Wählen Sie Alle | |
| styleWithCSS | |
| rückgängig machen | |
| useCSS |
Formatierung
Benutzer können contenteditable Dokumente oder Elemente mit den Funktionen ihres Browsers formatieren, z. B. gängige Tastenkombinationen für die Formatierung ( Strg-B für Fettdruck , Strg-I für Kursivschrift usw.) oder durch Ziehen und Ablegen von Bildern, Verknüpfungen oder Markierungen Zwischenablage.
Darüber hinaus können Entwickler mithilfe von JavaScript die aktuelle Auswahl (hervorgehobener Text) formatieren.
document.execCommand('bold', false, null); // toggles bold formatting
document.execCommand('italic', false, null); // toggles italic formatting
document.execCommand('underline', false, null); // toggles underline
Änderungen von Inhalten bearbeiten können
Ereignisse, die mit den meisten Formularelementen funktionieren (z. B. change , keydown , keyup , keypress ), funktionieren nicht mit contenteditable .
Stattdessen können Sie mit dem input Änderungen contenteditable Inhalte abhören. Angenommen, contenteditableHtmlElement ist ein JS-DOM-Objekt, das contenteditable :
contenteditableHtmlElement.addEventListener("input", function() {
console.log("contenteditable element changed");
});
Fertig machen
Das HTML-Attribut contenteditable bietet eine einfache Möglichkeit, ein HTML-Element in einen vom Benutzer bearbeitbaren Bereich umzuwandeln
<div contenteditable>You can <b>edit</b> me!</div>
Native Rich-Text-Bearbeitung
Mit Hilfe von JavaScript und execCommand W3C Sie können zusätzlich weitere Bearbeitungsfunktionen auf das aktuell fokussierte passieren contenteditable Element (insbesondere an der Position der Einfügemarke oder Auswahl).
Die Funktionsmethode execCommand akzeptiert 3 Argumente
document.execCommand(commandId, showUI, value)
-
commandIdString. aus der Liste der verfügbaren ** commandId ** s
(siehe: Parameter → commandId ) -
showUIBoolean (nicht implementiert.false) -
valueString Wenn ein Befehl einen befehlsbezogenen String- Wert erwartet, andernfalls"".
(siehe: Parameter → Wert )
Beispiel mit dem Befehl "bold" und "formatBlock" (wobei ein Wert erwartet wird):
document.execCommand("bold", false, ""); // Make selected text bold
document.execCommand("formatBlock", false, "H2"); // Make selected text Block-level <h2>
Schnellstart-Beispiel:
<button data-edit="bold"><b>B</b></button>
<button data-edit="italic"><i>I</i></button>
<button data-edit="formatBlock:p">P</button>
<button data-edit="formatBlock:H1">H1</button>
<button data-edit="insertUnorderedList">UL</button>
<button data-edit="justifyLeft">⇤</button>
<button data-edit="justifyRight">⇥</button>
<button data-edit="removeFormat">×</button>
<div contenteditable><p>Edit me!</p></div>
<script>
[].forEach.call(document.querySelectorAll("[data-edit]"), function(btn) {
btn.addEventListener("click", edit, false);
});
function edit(event) {
event.preventDefault();
var cmd_val = this.dataset.edit.split(":");
document.execCommand(cmd_val[0], false, cmd_val[1]);
}
<script>
jsFiddle Demo
Grundlegendes Beispiel für Rich-Text-Editor (moderne Browser)
Abschließende Gedanken
Die Implementierung und das Verhalten von execCommand sind selbst für lange Zeit (IE6) sehr unterschiedlich und variieren von Browser zu Browser. execCommand macht es für jeden erfahrenen JavaScript-Entwickler schwierig, einen voll funktionsfähigen und execCommand WYSIWYG-Editor zu execCommand .
Auch wenn es noch nicht vollständig standardisiert ist, können Sie mit den neueren Browsern wie Chrome, Firefox und Edge recht ordentliche Ergebnisse erwarten. Wenn Sie eine bessere Unterstützung für andere Browser und weitere Funktionen wie die Bearbeitung von HTMLTable usw. benötigen, sollten Sie nach einem bereits vorhandenen und robusten Rich-Text- Editor suchen.
Kopieren in die Zwischenablage von textarea mit execCommand ("copy")
Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<textarea id="content"></textarea>
<input type="button" id="copyID" value="Copy" />
<script type="text/javascript">
var button = document.getElementById("copyID"),
input = document.getElementById("content");
button.addEventListener("click", function(event) {
event.preventDefault();
input.select();
document.execCommand("copy");
});
</script>
</body>
</html>
document.execCommand("copy") kopiert die aktuelle Auswahl in die Zwischenablage