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.
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
Changer d'éditeur HTML WYSIWYG vous permet de :
Ajoutez les fonctionnalités dont votre projet a besoin
Facilitez l'utilisation pour les utilisateurs
Conservez le même formatage sur votre site
Voyons maintenant comment nous pouvons procéder avec un exemple réel.
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 :
Cela crée une nouvelle icône pour notre bouton
Il indique à l'éditeur quoi faire lorsque quelqu'un clique sur le bouton
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; }
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
Lorsque vous changez ces éditeurs, gardez ces conseils à l'esprit :
Commencez petit : effectuez d'abord de petits changements avant d'en essayer de grands.
Utiliser ce qui est là : utilisez les outils intégrés de l'éditeur lorsque vous le pouvez.
Testez beaucoup : assurez-vous que vos modifications fonctionnent dans différents navigateurs.
Pensez à la vitesse : De grands changements peuvent ralentir les choses, alors testez avec beaucoup de contenu.
Restez à jour : recherchez les nouvelles fonctionnalités qui pourraient vous aider.
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.
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!