Zoeken…
Syntaxis
- bool ondersteund = document.execCommand (commandName, showDefaultUI, valueArgument)
parameters
| commandId | waarde |
|---|---|
| ⋮ Inline opmaakopdrachten | |
| BackColor | Kleurwaarde String |
| stoutmoedig | |
| CreateLink | URL-tekenreeks |
| fontName | Naam lettertype |
| lettertypegrootte | "1", "2", "3", "4", "5", "6", "7" |
| voorgrond-kleur | Kleurwaarde String |
| doorhalen | |
| superscript | |
| unlink | |
| ⋮ Blokopmaakopdrachten | |
| verwijderen | |
| formatBlock | "adres", "dd", "div", "dt", "h1", "h2", "h3", "h4", "h5", "h6", "p", "pre" |
| forwardDelete | |
| insertHorizontalRule | |
| insertHTML | HTML-tekenreeks |
| Voeg afbeelding in | URL-tekenreeks |
| insertLineBreak | |
| insertOrderedList | |
| insertParagraph | |
| insertText | Tekst reeks |
| insertUnorderedList | |
| justifyCenter | |
| justifyFull | |
| justifyLeft | |
| justifyRight | |
| outdent | |
| ⋮ Klembord-opdrachten | |
| kopiëren | Momenteel geselecteerde tekenreeks |
| besnoeiing | Momenteel geselecteerde tekenreeks |
| Plakken | |
| ⋮ Diverse opdrachten | |
| defaultParagraphSeparator | |
| opnieuw doen | |
| selecteer alles | |
| styleWithCSS | |
| ongedaan maken | |
| useCSS |
formatteren
Gebruikers kunnen opmaak toevoegen aan contenteditable documenten of elementen met behulp van de functies van hun browser, zoals veelgebruikte sneltoetsen voor opmaak ( Ctrl-B voor vet , Ctrl-I voor cursief , enz.) Of door afbeeldingen, links of markeringen te slepen en neer te zetten klembord.
Bovendien kunnen ontwikkelaars JavaScript gebruiken om opmaak toe te passen op de huidige selectie (gemarkeerde tekst).
document.execCommand('bold', false, null); // toggles bold formatting
document.execCommand('italic', false, null); // toggles italic formatting
document.execCommand('underline', false, null); // toggles underline
Luisteren naar wijzigingen van contenteditable
Gebeurtenissen die met de meeste formulierelementen werken (bijv. change , keydown , keyup , keypress ) werken niet met contenteditable .
In plaats daarvan kunt u luisteren naar wijzigingen van contenteditable inhoud met de input . Ervan uitgaande dat contenteditableHtmlElement een JS DOM-object is dat contenteditable :
contenteditableHtmlElement.addEventListener("input", function() {
console.log("contenteditable element changed");
});
Ermee beginnen
Het HTML-kenmerk contenteditable biedt een eenvoudige manier om van een HTML-element een door de gebruiker bewerkbaar gebied te maken
<div contenteditable>You can <b>edit</b> me!</div>
Native Rich-Text bewerking
JavaScript en gebruiken execCommand W3C kunt u bovendien passeren meer functies voor het bewerken van de op dit moment gericht contenteditable element (specifiek op het dakje positie of selectie).
De execCommand functiemethode accepteert 3 argumenten
document.execCommand(commandId, showUI, value)
-
commandIdString. uit de lijst met beschikbare ** commandId ** s
(zie: Parameters → commandId ) -
showUIBoolean (niet geïmplementeerd. Gebruikfalse) -
valueString Als een commando verwacht een opdracht-gerelateerde String waarde, anders"".
(zie: Parameters → waarde )
Bijvoorbeeld met behulp van de "bold" commando en "formatBlock" (waarbij een waarde wordt verwacht):
document.execCommand("bold", false, ""); // Make selected text bold
document.execCommand("formatBlock", false, "H2"); // Make selected text Block-level <h2>
Snelstart voorbeeld:
<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
Eenvoudig Rich-Text editor-voorbeeld (moderne browsers)
Laatste gedachten
Zelfs als ze lange tijd aanwezig zijn (IE6), variëren de implementaties en het gedrag van execCommand van browser tot browser, waardoor het "bouwen van een volledig execCommand en cross-browser compatibele WYSIWYG-editor" een zware taak is voor elke ervaren JavaScript-ontwikkelaar.
Zelfs als ze nog niet volledig gestandaardiseerd zijn, kun je redelijk goede resultaten verwachten op de nieuwere browsers zoals Chrome, Firefox, Edge . Als u betere ondersteuning voor andere browsers en meer functies zoals HTMLTable-bewerking enz. Nodig heeft, is een vuistregel het zoeken naar een al bestaande en robuuste Rich-Text- editor.
Kopiëren naar klembord vanuit textarea met behulp van execCommand ("copy")
Voorbeeld:
<!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") kopieert de huidige selectie naar het klembord