Dans cet article, je vais expliquer comment créer un éditeur de code très simple basé sur un navigateur et utilisant principalement du CSS. À l'origine, je l'ai construit lorsque j'avais besoin de permettre aux utilisateurs de modifier JSON dans un CMS que je construisais.
Si vous souhaitez simplement passer au code et à l'exemple fonctionnel, c'est parti. Le code peut être trouvé ici et l'exemple fonctionnel ici
Donc, si vous avez déjà pensé à créer votre propre éditeur de code, vous avez probablement consulté contenteditable. Bien que contenteditable soit idéal dans de nombreuses situations, il existe un énorme problème concernant la mise à jour du contenu pendant que vous tapez. Il est presque impossible de replacer le curseur là où il se trouvait après avoir mis en évidence la syntaxe du code dans l'éditeur au fur et à mesure qu'il change.
Dans mon cas, je voulais quelque chose de très minimal sans avoir recours à une bibliothèque énorme et lourde pour cela. J'ai décidé de voir si je pouvais créer un éditeur très simple utilisant principalement du CSS, en utilisant simplement Javascript pour créer la sortie en surbrillance de la syntaxe et mettre à jour l'aperçu.
Je voulais taper un texte
