tiny editor

éditeur minuscule

Un minuscule éditeur de texte riche en HTML écrit en Javascript Vanilla

But

Créez une bibliothèque inférieure à 5 kb (compressée) qui permet à un élément HTML d'être utilisé comme éditeur de texte riche dans un vieux JavaScript de vanille.

Soutien

Si vous utilisez et aimez cette bibliothèque, n'hésitez pas à soutenir mes projets open source.

Comment installer

 npm install tiny-editor

ou chargez le fichier de bundle directement à la fin de votre document HTML.

 <script src="https://unpkg.com/tiny-editor/dist/bundle.js"></script>

Comment utiliser

1. Référence à la bibliothèque de l'éditeur dans votre document HTML
2. Ajoutez un attribut data-tiny-editor à l'élément HTML que vous souhaitez transformer en éditeur

Comment créer dynamiquement un éditeur

Utilisez la window.__tinyEditor.transformToEditor() qui prend comme premier argument l'élément DOM (généralement un <div> ) que vous souhaitez transformer en éditeur. Reportez-vous à /public/index.html pour un exemple.

Comment extraire le texte formaté

Écoutez l'événement input sur l'élément HTML Editor.

 document
  .querySelectorAll('[data-tiny-editor]')
  .forEach(editor =>
    editor.addEventListener('input', e => console.log(e.target.innerHTML)
  )
);

Comment personnaliser

Il existe différentes options qui peuvent être utilisées pour personnaliser la façon dont le petit éditeur sera rendu. Par défaut, toutes les options sont activées. Vous pouvez désactiver une option à l'aide d'attributs de données.

Par exemple, vous pouvez supprimer le bouton de format en gras à l'aide de l'attribut suivant:

 <div data-tiny-editor data-bold="no"></div>

Options

• data-formatblock="no" : supprimer la liste déroulante les styles
• data-bold="no" : supprimer le bouton en gras
• data-italic="no" :: supprimer le bouton italique
• data-underline="no" : supprimer le bouton de soulignement
• data-fontname="no" : supprimer la liste déroulante de la police
• data-forecolor="no" :: supprimer le bouton de couleur du texte
• data-justifyleft="no" : supprimer le bouton d'alignement gauche
• data-justifycenter="no" : supprimer le bouton d'alignement central
• data-justifyright="no" : supprimer le bouton d'alignement droit
• data-insertorderedlist="no" : supprimer le bouton de liste numérotée
• data-insertunorderedlist="no" : supprimer le bouton de liste à puces
• data-outdent="no" : supprimer le bouton de diminution de l'indentation
• data-indent="no" : supprimer le bouton d'augmentation
• data-remove-format="no" : Supprimez le bouton de mise en forme d'effondrement
• data-autofocus="no" : supprimer l'autofocus de l'éditeur

Navigateurs pris en charge

Le navigateur moderne (Chrome, Firefox, Edge, ...) est pris en charge. Tiny Editor ne fonctionne pas sur Internet Explorer.