Mes clients me demande toujours des éditeurs wysiwyg... Les utilisateurs aiment mettre en gras ou faire des listes.

Cela a fait les belles heures des classiques TinyMCE ou CKeditor mais au fil du temps ces éditeurs ont pris quelques rides et quelques $$$.

Cela faisait un petit moment que je cherchais une alternative Open Source répondant au besoin de mettre en gras ou faire des listes (et même ajouter des images) sans trouver quelque chose qui sortait particulièrement du lot ; et ce matin... je suis tombé sur Editor.js et c'est une véritable révélation.

C'est un éditeur de texte "Notion like" : vous y ajouter des blocs les uns en dessous des autres et vous pouvez choisir la typologie de bloc. Jusque là... il y en a d'autres me direz vous (Novel, Blocknote...). Oui, mais, moi qui suis plutôt du côté Vue JS de la force ces derniers temps, je n'étais pas tombé sur une solution facilement et correctement intégrable dans mes composants Vue ; et pour le coup Editor.js l'est !

Pour l'installation :

nom i @editorjs/editorjs @editorjs/quote @editorjs/header

Pour l'usage, dans un composant Editor.vue par exemple :

<script setup>
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import Quote from '@editorjs/quote';

const editor = new EditorJS({
    holder: 'editorjs',
    tools: {
        header: {
            class: Header,
            shortcut: 'CMD+SHIFT+H',
            config: {
                levels: [2, 3, 4, 5, 6],
                defaultLevel: 3
            }
        },
        quote: {
            class: Quote,
            inlineToolbar: true,
            shortcut: 'CMD+SHIFT+O',
        }
    },
});
</script>

<template>
    <div id="editorjs"></div>
</template>

Editor.js est fabriqué par l'équipe de CodeX