De nombreux éditeurs de composants HTML/JS proposent des éditeurs de texte riche. Ces éditeurs permettent à l’utilisateur de saisir du texte formatté (gras, italic, souligné, liste, etc). Dans cet article nous allons voir comment créer simplement un éditeur HTML.

L’astuce que nous allons utiliser est l’attribut contenteditable. Cet attribut peut s’appliquer sur n’importe quel élément de la page et le rend éditable.

<div class="editor" contenteditable="true"></div>

On peut utiliser un peu de CSS pour définir la taille de la zone éditable :

.editor {
    min-height: 300px;
    width: 100%;
    border: 1px solid black;
}

L’éditeur est fonctionnel, mais un peu difficile d’accès : seul les raccourcis claviers permettent de changer le formattage… Comme tout bon éditeur, il faut donc ajouter quelques boutons pour les commandes :

<div class="editor-commands">
    <ul>
        <li><a data-command="undo">Undo</a></li>
        <li><a data-command="redo">Redo</a></li>
        <li><a data-command="insertHorizontalRule">hr</a></li>
        <li><a data-command="bold">Bold</a></li>
        <li><a data-command="italic">Italic</a></li>
        <li><a data-command="underline">Underline</a></li>
        <li><a data-command="strikeThrough">strikeThrough</a></li>
        <li><a data-command="justifyLeft">justifyLeft</a></li>
        <li><a data-command="justifyCenter">justifyCenter</a></li>
        <li><a data-command="justifyRight">justifyRight</a></li>
        <li><a data-command="justifyFull">justifyFull</a></li>
        <li><a data-command="indent">indent</a></li>
        <li><a data-command="outdent">outdent</a></li>
        <li><a data-command="insertUnorderedList">insertUnorderedList</a></li>
        <li><a data-command="insertOrderedList">insertOrderedList</a></li>
        <li><a data-command="html" data-command-argument="h1">h1</a></li>
        <li><a data-command="html" data-command-argument="h2">h2</a></li>
        <li><a data-command="html" data-command-argument="h3">h3</a></li>
        <li><a data-command="html" data-command-argument="p">p</a></li>
        <li><a data-command="subscript">subscript</a></li>
        <li><a data-command="superscript">superscript</a></li>
    </ul>
</div>

Pour exécuter une commande il faut utiliser la méthode document.execCommand :

var commandButtons = document.querySelectorAll(".editor-commands a");
for (var i = 0; i < commandButtons.length; i++) {
    commandButtons[i].addEventListener("mousedown", function (e) {
        e.preventDefault();
        var commandName = e.target.getAttribute("data-command");
        if (commandName === "html") {
            var commandArgument = e.target.getAttribute("data-command-argument");
            document.execCommand('formatBlock', false, commandArgument);
        } else {
            document.execCommand(commandName, false);
        }
    });
}

Et voilà notre éditeur :

Pour récupérer le résultat HTML il suffit de récupérer l’innerHTML de l’éditeur :

var result = document.getElementById("Editor").innerHTML;

Pour aller plus loin :

Il existe des nombreuses autres commandes pour par exemple changer la couleur du texte, sa taille, la police, insérer un lien, etc. La liste des commandes peut différer d’un browser à l’autre. Il est possible de vérifier qu’une commande est exécutable avec la méthode queryCommandSupported.