Utilisez-vous des éditeurs HTML WYSIWYG dans vos projets ? Ces outils conviviaux sont devenus de plus en plus populaires parmi les développeurs Web et les créateurs de contenu, offrant une interface intuitive pour créer du contenu Web sans avoir à se plonger dans le code HTML brut. Bien que ces éditeurs soient puissants dès le départ, leur véritable potentiel est souvent libéré grâce à la personnalisation.

Points clés à retenir

• Vous pouvez ajouter de nouvelles fonctionnalités aux éditeurs HTML WYSIWYG

• Les boutons personnalisés aident les utilisateurs à formater facilement le contenu

• Changer l'apparence de l'éditeur peut correspondre au style de votre site

Pourquoi changer les éditeurs HTML WYSIWYG ?

Changer un éditeur HTML WYSIWYG vous permet :

1. Ajoutez les fonctionnalités dont votre projet a besoin

2. Facilitez l'utilisation par les utilisateurs

3. Conservez le même formatage sur votre site

Voyons maintenant comment nous pouvons procéder avec un exemple réel.

Ajout d'un bouton de surbrillance pratique

Souvent, nous souhaitons faire ressortir un texte. Ajoutons un bouton qui fait cela rapidement. Tout d'abord, nous devons ajouter l'éditeur à notre page :

Ensuite, nous pouvons ajouter notre nouveau bouton :

// Make a new icon
FroalaEditor.DefineIcon('highlight', {NAME: 'star'});

// Create a new button
FroalaEditor.RegisterCommand('highlight', {
  title: 'Highlight',
  icon: 'highlight',
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    this.html.insert(''   this.selection.text()   '');
  }
});

// Start the editor with our new button
new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight']
});

Ce code fait plusieurs choses :

1. Cela crée une nouvelle icône pour notre bouton

2. Il indique à l'éditeur quoi faire lorsque quelqu'un clique sur le bouton

3. Il ajoute notre nouveau bouton à la barre d'outils

Pour que le texte en surbrillance soit beau, nous ajoutons du style :

.fr-view .custom-highlight {
  background-color: yellow;
  padding: 2px;
  border-radius: 2px;
}

Rendre l'éditeur beau

Vous pouvez également modifier l'apparence de l'éditeur. Voici un moyen simple de procéder :

new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
  toolbarButtonsSM: ['bold', 'italic', 'underline', '-', 'highlight'],
  placeholderText: 'Type here...',
  charCounterCount: false,
  toolbarSticky: false,
  theme: 'royal'
});

Ce changement a plusieurs effets :

• Il configure des boutons pour différentes tailles d'écran

• Il ajoute du texte pour indiquer où taper

• Il désactive le compteur de caractères

• Cela fait bouger la barre d'outils avec la page

• Il utilise un thème prédéfini

Conseils pour changer les éditeurs HTML WYSIWYG

Lorsque vous modifiez ces éditeurs, gardez ces conseils à l'esprit :

1. Commencer petit : effectuez d'abord de petits changements avant d'en essayer de grands.

2. Utiliser ce qui est là : utilisez les outils intégrés de l'éditeur lorsque vous le pouvez.

3. Testez beaucoup : assurez-vous que vos modifications fonctionnent dans différents navigateurs.

4. Pensez à la vitesse : des changements importants peuvent ralentir les choses, alors testez avec beaucoup de contenu.

5. Restez à jour : recherchez les nouvelles fonctionnalités qui pourraient vous aider.

Utilisation d'éditeurs modifiés dans différents frameworks

Vous pouvez utiliser ces éditeurs modifiés dans de nombreux frameworks Web. Voici comment vous pouvez utiliser notre éditeur modifié dans React :

import React, { useEffect, useRef } from 'react';
import FroalaEditor from 'react-froala-wysiwyg';

const MyEditor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    if (editorRef.current) {
      FroalaEditor.DefineIcon('highlight', {NAME: 'star'});
      FroalaEditor.RegisterCommand('highlight', {
        title: 'Highlight',
        icon: 'highlight',
        focus: true,
        undo: true,
        refreshAfterCallback: true,
        callback: function () {
          this.html.insert(''   this.selection.text()   '');
        }
      });
    }
  }, []);

  const config = {
    toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
    placeholderText: 'Type here...'
  };

  return ;
};

export default MyEditor;

Ce composant React enveloppe notre éditeur modifié, le rendant facile à utiliser dans votre application React.

Conclusion

Les éditeurs HTML WYSIWYG sont d'excellents outils pour créer du contenu. De plus, lorsque vous les modifiez pour les adapter à vos besoins, ils deviennent encore meilleurs. En ajoutant de nouveaux boutons, en modifiant leur apparence et en les intégrant à votre projet, vous pouvez créer un outil d'édition parfait.

N'oubliez pas que l'objectif est de faire en sorte que l'éditeur fonctionne parfaitement pour vous. Avec quelques changements astucieux, vous pouvez transformer un bon éditeur en un excellent éditeur qui s'intègre parfaitement à votre travail.

Alors, n'hésitez plus et essayez-le ! Changez votre éditeur HTML WYSIWYG et voyez à quel point il peut être meilleur pour vos utilisateurs.

Ce post a été initialement publié sur le blog de Froala.