Sök…
Syntax
- bool stött = document.execCommand (kommando Namn, showDefaultUI, valueArgument)
parametrar
| commandId | värde |
|---|---|
| ⋮ Kommandon för inbyggd formatering | |
| Bakfärg | Färgvärde Sträng |
| djärv | |
| createLink | URL-sträng |
| fontName | Teckensnittsnamn |
| textstorlek | "1", "2", "3", "4", "5", "6", "7" |
| foreColor | Färgvärde Sträng |
| strykning | |
| exponent | |
| ta bort länken | |
| ⋮ Blockera formateringskommandon | |
| radera | |
| formatBlock | "adress", "dd", "div", "dt", "h1", "h2", "h3", "h4", "h5", "h6", "p", "pre" |
| forwardDelete | |
| insertHorizontalRule | |
| insertHTML | HTML-sträng |
| insertImage | URL-sträng |
| insertLineBreak | |
| insertOrderedList | |
| insertParagraph | |
| Insert | Textsträng |
| insertUnorderedList | |
| justifyCenter | |
| justifyFull | |
| justifyLeft | |
| justifyRight | |
| Minska indrag | |
| ⋮ Urklippskommandon | |
| kopia | För närvarande vald sträng |
| skära | För närvarande vald sträng |
| klistra | |
| ⋮ Övriga kommandon | |
| defaultParagraphSeparator | |
| göra om | |
| Välj alla | |
| styleWithCSS | |
| ångra | |
| useCSS |
formatering
Användare kan lägga till formatering till contenteditable kan redigeras med hjälp av webbläsarens funktioner, till exempel vanliga kortkommandon för formatering ( Ctrl-B för fetstil , Ctrl-I för kursiv , etc.) eller genom att dra och släppa bilder, länkar eller markering från urklipp.
Dessutom kan utvecklare använda JavaScript för att tillämpa formatering på det aktuella urvalet (markerad text).
document.execCommand('bold', false, null); // toggles bold formatting
document.execCommand('italic', false, null); // toggles italic formatting
document.execCommand('underline', false, null); // toggles underline
Lyssna på ändringar av innehållsförändrad
Händelser som fungerar med de flesta formelement (t.ex. change , keydown , keyup , keypress ) fungerar inte med contenteditable .
Istället kan du lyssna på förändringar av contenteditable redigeras med input . Antar contenteditableHtmlElement är ett JS DOM-objekt som är contenteditable :
contenteditableHtmlElement.addEventListener("input", function() {
console.log("contenteditable element changed");
});
Komma igång
HTML-attributet contenteditable ger ett enkelt sätt att förvandla ett HTML-element till ett användarredigerbart område
<div contenteditable>You can <b>edit</b> me!</div>
Native Rich Text Editing
Med hjälp av JavaScript och execCommand W3C kan du dessutom vidarebefordra fler redigeringsfunktioner till det för närvarande fokuserade contenteditable elementet (specifikt vid caret-positionen eller urvalet).
execCommand accepterar execCommand argument
document.execCommand(commandId, showUI, value)
-
commandIdString. från listan över tillgängliga ** kommandotId **
(se: Parametrar → commandId ) -
showUIBoolean (inte implementerad. Användfalse) -
valueString Om ett kommando förväntar sig ett kommandorelaterat String- värde , annars"".
(se: Parametrar → värde )
Exempel med hjälp av kommandot "bold" och "formatBlock" (där ett värde förväntas):
document.execCommand("bold", false, ""); // Make selected text bold
document.execCommand("formatBlock", false, "H2"); // Make selected text Block-level <h2>
Exempel på snabbstart:
<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
Grundläggande exempel på Rich Text Editor (moderna webbläsare)
Slutgiltiga tankar
Till och med att vara närvarande under en lång tid (IE6), implementeringar och beteenden hos execCommand varierar från webbläsare till webbläsare vilket gör "att bygga en fullständig funktionalitet och tvär webbläsarkompatibel WYSIWYG-redigerare" till en svår uppgift för alla erfarna JavaScript-utvecklare.
Även om det ännu inte är helt standardiserat kan du förvänta dig ganska anständiga resultat på de nyare webbläsarna som Chrome, Firefox, Edge . Om du behöver bättre stöd för andra webbläsare och fler funktioner som HTMLTable-redigering etc. är tummen en regel att leta efter en redan existerande och robust Rich-Text- redigerare.
Kopiera till urklipp från textområdet med execCommand ("kopia")
Exempel:
<!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") kopierar det aktuella valet till Urklipp