JavaScript => execCommand e contenteditable

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 )}
showUI Boolean (non implementato. Utilizza false )
value String 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">&#8676;</button>
<button data-edit="justifyRight">&#8677;</button>
<button data-edit="removeFormat">&times;</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

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

JavaScript
execCommand e contenteditable

Ricerca…