Ricerca…
Sintassi
- bool supportato = document.execCommand (commandName, showDefaultUI, valueArgument)
Parametri
| commandId | valore |
|---|---|
| ⋮ Comandi di formattazione incorporati | |
| colore di sfondo | Valore del colore Stringa |
| grassetto | |
| createLink | Stringa di URL |
| fontName | Nome della famiglia di caratteri |
| dimensione del font | "1", "2", "3", "4", "5", "6", "7" |
| ForeColor | Valore del colore Stringa |
| Barrato | |
| indice | |
| scollegare | |
| ⋮ Blocca i comandi di formattazione | |
| Elimina | |
| formatBlock | "indirizzo", "dd", "div", "dt", "h1", "h2", "h3", "h4", "h5", "h6", "p", "pre" |
| forwardDelete | |
| insertHorizontalRule | |
| insertHTML | Stringa HTML |
| insertImage | Stringa di URL |
| insertLineBreak | |
| insertOrderedList | |
| insertParagraph | |
| insertText | Stringa di testo |
| insertUnorderedList | |
| justifyCenter | |
| justifyFull | |
| justifyLeft | |
| justifyRight | |
| outdent | |
| ⋮ Comandi degli appunti | |
| copia | Stringa attualmente selezionata |
| taglio | Stringa attualmente selezionata |
| incolla | |
| ⋮ Comandi vari | |
| defaultParagraphSeparator | |
| rifare | |
| seleziona tutto | |
| styleWithCSS | |
| disfare | |
| useCSS |
formattazione
Gli utenti possono aggiungere la formattazione a documenti o elementi contenteditable utilizzando le funzionalità del browser, come le scorciatoie da tastiera comuni per la formattazione ( Ctrl-B per il grassetto , Ctrl-I per il corsivo , ecc.) O trascinando e rilasciando immagini, collegamenti o marcature dal clipboard.
Inoltre, gli sviluppatori possono utilizzare JavaScript per applicare la formattazione alla selezione corrente (testo evidenziato).
document.execCommand('bold', false, null); // toggles bold formatting
document.execCommand('italic', false, null); // toggles italic formatting
document.execCommand('underline', false, null); // toggles underline
Ascoltando i cambiamenti di contenteditable
Gli eventi che funzionano con la maggior parte degli elementi del modulo (ad esempio, change , keydown , keyup , keypress ) non funzionano con contenteditable .
Invece, è possibile ascoltare i cambiamenti di contenteditable contenuti con l' input evento. Supponendo contenteditableHtmlElement è un oggetto JS DOM che è contenteditable :
contenteditableHtmlElement.addEventListener("input", function() {
console.log("contenteditable element changed");
});
Iniziare
L'attributo HTML contenteditable fornisce un modo semplice per trasformare un elemento HTML in un'area modificabile dall'utente
<div contenteditable>You can <b>edit</b> me!</div>
Modifica nativa di Rich-Text
Usando JavaScript e execCommand W3C puoi anche passare più funzioni di modifica all'elemento contenteditable attualmente focalizzato (in particolare nella posizione o nella selezione del cursore).
Il metodo della funzione execCommand accetta 3 argomenti
document.execCommand(commandId, showUI, value)
- stringa
commandId. dall'elenco di ** commandId ** disponibili
(vedi: Parametri → commandId ) -
showUIBoolean (non implementato. Utilizzafalse) -
valueString Se un comando si aspetta un valore di stringa relativo al comando, altrimenti"".
(vedi: Parametri → valore )
Esempio utilizzando il comando "bold" e "formatBlock" (dove è previsto un valore ):
document.execCommand("bold", false, ""); // Make selected text bold
document.execCommand("formatBlock", false, "H2"); // Make selected text Block-level <h2>
Esempio di avvio rapido:
<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>
demo di jsFiddle
Esempio di editor Rich-Text di base (browser moderni)
Pensieri finali
Pur essendo presente da molto tempo (IE6), le implementazioni e i comportamenti di execCommand variano da browser a browser e rendono "la creazione di un editor WYSIWYG compatibile e compatibile con più browser" un compito arduo per qualsiasi sviluppatore JavaScript esperto.
Anche se non sono ancora completamente standardizzati, puoi aspettarti risultati decenti sui nuovi browser come Chrome, Firefox, Edge . Se hai bisogno di un supporto migliore per altri browser e altre funzionalità come la modifica HTMLTable, una regola empirica è cercare un editor Rich-Text già esistente e affidabile.
Copia negli appunti da textarea utilizzando execCommand ("copia")
Esempio:
<!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") copia la selezione corrente negli appunti
