JavaScript => execCommand et contenteditable

Syntaxe

bool supported = document.execCommand (commandName, showDefaultUI, valueArgument)

Paramètres

commandId	valeur
⋮ Commandes de formatage en ligne
couleur de fond	Valeur de couleur Chaîne
audacieux
créerLien	Chaîne d'URL
fontName	Nom de famille de la police
taille de police	"1", "2", "3", "4", "5", "6", "7"
couleur de premier plan	Valeur de couleur Chaîne
grève
exposant
dissocier
⋮ Bloquer les commandes de formatage
effacer
formatBlock	"adresse", "dd", "div", "dt", "h1", "h2", "h3", "h4", "h5", "h6", "p", "pre"
forwardDelete
insertHorizontalRule
insertHTML	Chaîne HTML
Insérer une image	Chaîne d'URL
insertLineBreak
insertOrderedList
insertParagraph
insertText	Chaîne de texte
insertUnorderedList
justifierCenter
justifier
justifier
justifierRight
dépassé
⋮ Commandes du Presse-papiers
copie	Chaîne actuellement sélectionnée
Couper	Chaîne actuellement sélectionnée
coller
⋮ Commandes diverses
defaultParagraphSeparator
refaire
tout sélectionner
styleWithCSS
annuler
utiliserCSS

Mise en forme

Les utilisateurs peuvent ajouter un formatage à contenteditable documents ou éléments en utilisant les fonctionnalités de leur navigateur, comme les raccourcis clavier communs pour le formatage (Ctrl-B pour le gras, Ctrl-I pour italique, etc.) ou par glisser-déposer des images, des liens ou le balisage de la presse-papiers

En outre, les développeurs peuvent utiliser JavaScript pour appliquer la mise en forme à la sélection en cours (texte en surbrillance).

document.execCommand('bold', false, null); // toggles bold formatting
document.execCommand('italic', false, null); // toggles italic formatting
document.execCommand('underline', false, null); // toggles underline

Ecouter les changements de contenu

Les événements qui travaillent avec la plupart des éléments de forme (par exemple, le change , keydown , keyup , keypress ) ne fonctionnent pas avec contenteditable .

Au lieu de cela, vous pouvez écouter les changements de contenteditable contenu avec l' input événement. En supposant que contenteditableHtmlElement est un objet DOM JS pouvant être contenteditable :

contenteditableHtmlElement.addEventListener("input", function() {
    console.log("contenteditable element changed");
});

Commencer

L'attribut HTML contenteditable fournit un moyen simple de transformer un élément HTML en une zone modifiable par l'utilisateur

<div contenteditable>You can <b>edit</b> me!</div>

Édition native de texte enrichi

En utilisant JavaScript et execCommand ^W3C, vous pouvez en outre transmettre plus de fonctionnalités d'édition à l'élément contenteditable actuellement ciblé (en particulier à la position ou à la sélection du curseur).

La méthode de la fonction execCommand accepte 3 arguments

document.execCommand(commandId, showUI, value)

commandId String. de la liste des ** commandId ** s disponibles
^{(voir: Paramètres → commandId )}
showUI Boolean (non implémenté. Utiliser false )
value String Si une commande attend une valeur de chaîne liée à la commande, sinon "" . ^{(voir: Paramètres → valeur )}

Exemple utilisant la commande "bold" et "formatBlock" (où une valeur est attendue):

document.execCommand("bold", false, "");          // Make selected text bold
document.execCommand("formatBlock", false, "H2"); // Make selected text Block-level <h2>

Exemple de démarrage rapide:

<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>

jsfiddle démo
Exemple de base de l'éditeur de texte enrichi (navigateurs modernes)

Dernières pensées
Même être présent pendant une longue période (IE6), les implémentations et les comportements de execCommand varient d'un navigateur à l'autre.
Même s'ils ne sont pas encore totalement standardisés, vous pouvez vous attendre à des résultats assez corrects sur les nouveaux navigateurs tels que Chrome, Firefox, Edge . Si vous avez besoin d'une meilleure prise en charge des autres navigateurs et de fonctionnalités telles que l'édition HTMLTable, etc., une règle générale consiste à rechercher un éditeur de texte riche et existant .

Copier dans le presse-papier à partir de textarea en utilisant execCommand ("copy")

Exemple:

<!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") copie la sélection en cours dans le presse-papiers

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

JavaScript
execCommand et contenteditable

Recherche…