HTML Live Editor

[Help.]

Un essai avec la librairie Medium Editor, qui permet de rendre éditable n'importe quel texte sur un page web.
En cours de route ça m'a donné un éditeur de texte html, qui s'avère très pratique...

Il suffit de taper du texte ci-dessous, et de surligner n'importe quels mots pour pouvoir les passer en gras, en h1, ajouter un lien avec le bouton #, etc

Entrée pour faire un nouveau paragraphe, Shift+Entrée pour un simple retour à la ligne.

// Built in 02/2022 by Gildas P.

[Note technique ↓ ]

Medium Editor

Un éditeur en ligne plutôt cool, mais pas parfait tel quel.

Déjà, j'ai trouvé les params qui m'arrangent bien, avec

des listes à puces
liens blank
autolink (url brute -> lien)...
paragraphe.. yavait pas ! (ajouté en js dans min.js qui est donc modifié)

Javascript

Le code de base (plus d'info dans script.js de cet exemple) :

var ed = new MediumEditor('header', {
    autoLink: true,
    targetBlank: true,
    toolbar: {
        buttons: ['bold', 'italic', 'underline', 'strikethrough', 
        'anchor', 'h1', 'h2', 'h3', 'paragraph', 
        'pre', 'unorderedlist']
    }
});

Header HTML

<link rel="stylesheet" href="css/medium-editor.min.css">
<link rel="stylesheet" href="css/themes/default.min.css">
<script type="text/javascript" src="js/medium-editor.min.js"></script>

Au fait ya des thèmes disponibles.

Export du code

Ma foi le code est pas mal, à part le noeud principal qui est pourri de classes CSS et d'attributs... mais c'est cleané dès qu'on désactive l'édition.

Pour un export programmé, il faut soit

passer par la méthode interne de Medium ed.getContent()
désactiver Medium + lecture avec jQuery genre $('header').html()

Les 2 marchent impec.

Des fois ya des <div> pas utiles, c'est facile à filtrer manuellement.

Méthode manuelle qui marche très bien aussi : en allant dans l'inspecteur, clic droit sur le header et Copier > L'intérieur du HTML, ben j'ai fait toute cette page :)

Dans l'API :

ed.getContent();
ed.resetContent(); // pour annuler les modifs
ed.serialize(); // -> json
ed.setContent(html, index); // injecter du code html

Désactiver l'édition

C'est détaillé dans l'API de Medium Editor :

ed.destroy();

Réactiver l'édition

Ben faut faire une fonction manuelle j'imagine...
C'est ce que j'ai fait ici, ça a l'air de bien marcher :)

Import de code HTML

Marche bien depuis un textarea :)

soit via ed.setContent(code)
soit via $('header').html(code)...

Ya pas de différence ça marche très bien.

Cette page est donc un éditeur de code HTML réussi !

Ben là j'ai un seul champ éditable... pour Home 4.0 il va falloir éditer plusieurs zones, ce sera sans doute un peu plus compliqué de toggle + export (mais bon ça devrait aller).