Besoin d'un excellent éditeur de texte enrichi React ? L'éditeur KendoReact devrait être sur votre liste restreinte ! Vous savez qu'il est riche en fonctionnalités, mais à quel point est-il personnalisable ? Voyons.
Afficher du contenu à nos utilisateurs n'est que la moitié de la bataille. Dans la plupart des situations, une application doit également gérer le contenu saisi par l'utilisateur.
Pour vos entrées plus standard, telles que les zones de texte, les curseurs de plage, les commutateurs, les sélecteurs de couleurs et d'autres éléments que vous pourriez trouver dans un formulairela bibliothèque d'entrées KendoReact vous a couvert.
Cependant, vos utilisateurs doivent parfois pouvoir faire beaucoup plus avec leur contenu, y compris la mise en forme (comme la mise en gras, la coloration, la modification de l'alignement, etc.), ou l'intégration d'images, la création de tableaux de données, l'utilisation de puces ou de numéros des listes, des liens vers du contenu… en gros, un traitement de texte complet. Pour cela, vous aurez besoin du KendoReact Editor.
Le KendoReact Rich Text Editor a une longue liste de fonctionnalités impressionnantes (et je vous encourage fortement à les vérifier en détail dans nos docs) – mais, dans l'intérêt d'écrire un article de blog et non de The Next Great American Novel, nous allons nous concentrer sur les fonctionnalités qui vous permettent de personnaliser l'éditeur.
Définition des règles d'entrée
Les règles d'entrée vous permettent de modifier l'entrée de l'utilisateur au fur et à mesure qu'il la créeen faisant correspondre son entrée avec un ensemble de règles que vous avez créées à l'aide de regex.
Par exemple, dans nos documents, nous avons un ensemble d'excellentes règles de saisie que nous avons créées pour correspondre à la syntaxe Markdown. Cela nous permet de faire des choses comme convertir les caractères de hachage (###) en en-têtes h#les backticks (`) en blocs de code et les tirets (-) en puces pour une liste à puces. Vous pouvez également utiliser des règles de saisie personnalisées pour apporter de petites améliorations à la qualité de vie, comme convertir des tirets doubles (–) en un tiret cadratin approprié (—) ou des points triples (…) en une ellipse (…).
En fait, il serait tout à fait possible d'échanger un mot spécifique contre un autre, en créant votre propre correction automatique personnalisée, ce que nous ferons dans l'exemple ci-dessous. Tout cela pour dire : le ciel (ou, peut-être juste votre connaissance des expressions rationnelles) est la limite à la création de vos propres règles de saisie personnalisées !
Ici, j'ai créé une règle personnalisée qui recherche la chaîne « bonjour » et la modifie à « bonjour ». Pour ce faire, je me suis assuré d'avoir importé ProseMirror (un moteur externe que nous avons utilisé pour aider à créer l'éditeur), puis défini inputRulequi renverra toutes les règles que nous écrivons. Toutes les règles personnalisées que vous souhaitez ajouter à votre éditeur doivent être renvoyées par inputRules ! Pour créer une nouvelle règle, il vous suffit d'utiliser new InputRulepuis d'ouvrir la parenthèse et de définir la règle en définissant l'entrée que vous recherchez et l'entrée par laquelle vous souhaitez la remplacer, séparées par une virgule .
const inputRule = (nodes) => {
return inputRules({
règles : [
nouveau InputRule(/hello$/'salut'),
nouveau InputRule()
],
});
} ;
Après cela, nous nous assurons simplement que, onMountnous chargeons ces règles d'entrée dans le cadre de notre liste de plugins, puis renvoyons la EditorView mise à jour. Cela garantit que l'éditeur de texte enrichi React s'affiche avec nos nouvelles règles d'entrée en place.
const onMount = (event) => {
const état = event.viewProps.état ;
const plugins = [state.plugins, inputRule(state.schema.nodes)] ;
retourner une nouvelle vue de l'éditeur (
{
monture : event.dom,
},
{
...event.viewProps,
état : EditorState.create({
doc : état.doc,
plugins,
}),
}
);
} ;
C'est aussi simple que cela ! Je vous recommande de ne pas suivre mes traces en remplaçant des mots aléatoires au fur et à mesure que l'utilisateur tape. vit plus facilement. N'oubliez pas que modifier automatiquement le contenu peut être une arme à double tranchant : c'est utile lorsque nous sommes en mesure de prédire correctement les besoins de nos utilisateurs, mais peut créer une expérience utilisateur frustrante lorsque ce n'est pas le cas. Assurez-vous de mettre en œuvre ces règles parallèlement à de nombreux tests et validations par les utilisateurs !
Étant donné que chaque application est différente et chaque base d'utilisateurs est différente, chaque éditeur React WYSIWYG doit également être différent. Vos utilisateurs créeront-ils principalement des listes ? Rédaction d'essais ? Saisir des extraits de code ? Selon ce que vous prévoyez de faire avec le contenu par la suite, vous ne voudrez peut-être pas que vos utilisateurs puissent modifier la couleur du texte ou intégrer des images.
Chaque composant que nous créons est conçu pour être très flexible car nous comprenons que tous les problèmes ne peuvent pas être résolus avec la même solution. En fin de compte, en tant que développeur, vous savez ce qui est le mieux pour votre base d'utilisateurs et vous devriez être en mesure de personnaliser chaque composant que vous utilisez pour offrir à vos utilisateurs l'expérience personnalisée et intuitive qu'ils méritent.
Cela signifie que dans notre éditeur de texte enrichi React, vous décidez quels outils apparaissent dans la barre d'outils au-dessus du panneau WYSIWYG—incluez ceux dont vous avez besoin et omettez ceux dont vous n'avez pas besoin. Pour aller encore plus loin, vous pouvez également personnaliser l'un des outils de notre suite existante, ou créer vos propres outils totalement nouveaux et les mettre dans la barre d'outils à côté du nôtre s'il y a quelque chose que vous devez permettre à vos utilisateurs de faire qui est unique à votre application. Ajoutez vos propres boutons, listes déroulantes, bascules : quels que soient vos besoins, nous avons ce qu'il vous faut.
Dans cet exemple, nous avons personnalisé le sélecteur déroulant de taille de police existant. Et encore une fois, je donne un excellent exemple « fais ce que je dis, pas ce que je fais », car ici je ne propose à mes utilisateurs que deux tailles de police : 10pt et 50pt. Allez grand ou rentrez chez vous, dis-je.
Pour ce faire, nous créons un nouveau fichier, que j'ai appelé myFontSize.jsx. Là, nous importons EditorTools et EditorToolsSettingspuis utilisons EditorToolsSettings.fontSize pour ajuster l'outil Taille de police. Dans ce cas, nous définissons un objet qui comprend autant d'éléments que nous voulons apparaître dans la liste déroulante, ainsi que le texte qui apparaîtra à l'utilisateur et la valeur qui sera appliquée au style font-size.
const fontSizeToolSettings = {
...EditorToolsSettings.fontSize,
éléments: [
{
texte : '10',
valeur : '10pt',
},
{
texte : '50',
valeur : '50pt',
},
{
texte :
valeur:
}],
} ;
Ensuite, pour implémenter les modifications apportées aux paramètres de l'outil de taille de police, nous créons et exportons un nouveau composant qui remplacera l'ancien outil de taille de police, mais avec nos personnalisations appliquées :
const CustomFontSize =
EditorTools.createStyleDropDownList(fontSizeToolSettings);
const MyFontSizeTool = (props) => ;
export default MyFontSizeTool ;
Et puis de retour dans le fichier où nous utilisons notre éditeur de texte React, nous pouvons simplement importer MyFontSizeTool et l'appeler dans la liste des outils de l'éditeur, comme n'importe quel outil préexistant !
<Editeur
outils={[MyFontSizeTool]}
/>
Avec cela, vous pouvez créer une barre d'outils pleine d'outils totalement personnalisés, ajuster nos outils existants ou utiliser n'importe quelle combinaison de ceux-ci avec notre suite d'outils existante. Que vous recherchiez un composant de traitement de texte complet ou un éditeur de texte simplifié et convivial avec seulement quelques outils nécessaires, l'éditeur de texte enrichi KendoReact fait l'affaire.
Ce que vous voyez n'est pas ce que vous obtenez avec l'éditeur de texte enrichi React — il y a tellement plus sous la surface ! et configuration pour les développeurs cachés ci-dessous. Le ciel est vraiment la limite avec ce composant, et nos documents complets et ressources d'assistance sont là pour vous aider à chaque étape.
Prêt à essayer ? Essayez gratuitement toute la suite de composants pendant 30 jours et voyez si notre éditeur de texte enrichi est juste votre type (obtenez-le ??).
Source link