Faites travailler les éditeurs HTML WYSIWYG pour vous

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 d'éditeur HTML WYSIWYG vous permet de :

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

2. Facilitez l'utilisation pour 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 :

<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

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('<span class="custom-highlight">' + this.selection.text() + '</span>');
  }
});

// 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 fait plusieurs choses :

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

• Il ajoute du texte pour montrer 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 changez ces éditeurs, gardez ces conseils à l'esprit :

1. Commencez 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 : De grands changements 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('<span class="custom-highlight">' + this.selection.text() + '</span>');
        }
      });
    }
  }, []);

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

  return <FroalaEditor tag='textarea' config={config} ref={editorRef} />;
};

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!