Maison > interface Web > js tutoriel > le corps du texte

Faites travailler les éditeurs HTML WYSIWYG pour vous

WBOY
Libérer: 2024-08-29 12:43:23
original
941 Les gens l'ont consulté

Make WYSIWYG HTML Editors Work for You

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>
Copier après la connexion

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']
});
Copier après la connexion

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;
}
Copier après la connexion

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'
});
Copier après la connexion

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;
Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!