Comment utiliser l'éditeur de KendoReact

L'éditeur est un composant puissant et polyvalent de KendoReact, facilitant l'ajout et le formatage de texte et d'autres contenus HTML. Apprenez à l’utiliser et à le personnaliser dans vos applications React.

Le composant Editor de KendoReact est un éditeur de texte riche en WYSIWYG complet et hautement personnalisable, pouvant être intégré partout. besoin de fournir l'édition HTML (CMS, forums, systèmes de billetterie, clients de messagerie, clients de discussion, etc.). Il permet aux utilisateurs de saisir du texte au format libre, d'appliquer un large éventail d'options de formatage et d'insérer du contenu HTML tel que des images, des tableaux et des hyperliens.

L'éditeur propose un large ensemble d'outils intégrés. Vous pouvez également ajouter des outils personnalisés, modifier le rendu de tous les éléments de l'éditeur (rendu personnalisé) et étendre la fonctionnalité intégrée en ajoutant des plug-ins. L'éditeur, comme tous les autres composants de la bibliothèque de l'interface utilisateur KendoReact, est construit en TypeScript.

Dans cet article de blog, je vais vous montrer comment utiliser l'éditeur et nous allons passer en revue:

Prise en main de KendoReact Editeur

Vous devez d'abord importer le composant Editor et le module EditorTools du package, @ progress / kendo-react-editor . Ensuite, procurez-vous les outils nécessaires dans EditorTools et transmettez-les à l'outil de l'éditeur. Le contenu initial est défini via la propriété defaultContent . Obtenir du contenu dans l'éditeur ou définir un nouveau contenu à l'aide de l'aide getHtml () et setHtml () exportée par le module EditorUtils

Jusqu'à présent, vous n'avez pas besoin de savoir comment l'éditeur gère son contenu ni comment fonctionnent les outils. Si votre projet nécessite une personnalisation ou si les fonctionnalités de l'éditeur doivent être étendues, poursuivez votre lecture à mesure que nous explorons les différentes manières de personnaliser ou d'étendre les fonctionnalités de l'éditeur.

Comment personnaliser les outils intégrés de l'éditeur de texte React [19659006] Il existe deux façons de personnaliser les outils intégrés de cet éditeur:

1. Utilisation des fonctions utilitaires de l'éditeur pour générer des outils
2. Intégration de l'outil dans une fonction de composant d'ordre supérieur (HOC), via auxquels ajouter les nouveaux accessoires dont vous avez besoin

Utilisation des fonctions utilitaires de l'éditeur pour la génération d'outils

Tous les outils de l'éditeur sont des composants React et sont générés par une fonction HOC correspondante. Chaque outil a également un objet de paramètres qui est transmis à sa fonction de génération en tant que paramètre. Le package Editor exporte à la fois les fonctions et les paramètres nécessaires à la génération d’outils. Par exemple, l'outil Gras a été créé de la manière suivante:

 import {EditorToolsSettings, EditorTools} à partir de '@ progress / kendo-react-editor';
const BoldTool = EditorTools.createInlineFormatTool (EditorToolsSettings.bold);

Le passage d'une version modifiée de EditorToolsSettings.bold à EditorTools.createInlineFormatTool () créera un outil personnalisé. Voici à quoi ressemblent les paramètres par défaut de l'outil Gras:

 const boldSettings = {
  mark: 'strong', // bascule la balise 'STRONG'
  altMarks: ['b']// reconnaît la balise 'B' également en gras

  // reconnaît un noeud en ligne avec un style d'épaisseur de police et un
  // valeur correspondant à l'expression régulière
  altStyle: {name: 'font-weight', valeur: / ^ (bold (er)? | [5-9]  d {2,}) $ /},

  // props qui seront passés au composant Button de l'outil
  accessoires: {
    icône: "gras",
    type: 'bouton'
  }
};

// Les clés de messages utilisées par l'outil pour la localisation. Voir
// également https://www.telerik.com/kendo-react-ui/components/editor/globalization/#toc-messages 

 {
  messages: {
    titre: 'editor.bold'
  },

  // le nom de la commande que l'outil exécute
  commandName: 'Bold'
}; 

Cette approche vous permet de modifier facilement l'apparence et le comportement des outils sans avoir à apprendre en profondeur la construction de l'ensemble du composant. Suivez ce lien pour obtenir une liste complète de paramètres et de fonctions pour la génération d'outil d'édition .

Intégration de l'outil dans un HOC

Le HOC étend les accessoires de l'outil souhaité et renvoie l'outil personnalisé. Ajoutez ensuite la fonction HOC à votre collection d’outils. Aussi simple que cela:

 const CustomBold = (props) => {
  revenir  (
    
  )
};

<Éditeur
  outils = {[
    [CustomBold,  /* ... */ ]
  ]}
  
/>

À l'heure actuelle, les accessoires de tous les outils prolongent les accessoires de KendoReact Button et DropDownList . Dans notre cas, les accessoires disponibles pour notre outil personnalisé sont répertoriés dans l'interface ButtonProps . En d’autres termes, lorsqu’il s’agit de personnaliser les outils, vous pouvez également configurer tout ce que le bouton KendoReact ou DropDownList permet.

Comment implémenter des outils personnalisés dans l’éditeur KendoReact Editor

L’approche ci-dessus pour la personnalisation des outils intégrés peut également être utilisé pour générer de nouveaux outils. Par exemple, si nous prenons les paramètres de l'outil Gras et que nous remplaçons la marque par 'code' props.icon par 'code-snippet' et supprimer les champs altMarks et altStyle nous pouvons générer un outil totalement différent qui basculera l'élément .

 const codeSnippetSettings = {
  mark: 'code', // bascule la balise 'code'
  accessoires: {
    icône: 'extrait de code',
    type: 'bouton'
  },
  messages: {},
  commandName: 'Code'
};

const CodeTool = EditorTools.createInlineFormatTool (codeSnippetSettings); 

Le package de l'éditeur exporte également toutes les fonctionnalités utilisées par les outils intégrés, notamment les fonctions de formatage, d'insertion de contenu et autres. Cela vous permet de créer vos propres outils dont les bases ont déjà été définies (par exemple, comment insérer du contenu HTML ou appliquer un formatage).

Voici un exemple de notre outil de code personnalisé et quelques autres outils de formatage et d'insertion. contenu:

Pourquoi assainir le contenu collé?

Le contenu HTML collé peut paraître très laid, surtout s'il est copié à partir de MS Word. Les listes sont présentées sous forme de paragraphes stylisés et le contenu peut contenir des styles HTML non commentés, des commentaires et des chaînes XML.

Selon notre expérience, les utilisateurs ne sont pas toujours satisfaits de la fonctionnalité de collage intégrée. Ils ont souvent des exigences spécifiques à un projet, qui doivent être gérées en externe. Pour cette raison, nous avons décidé de déplacer la fonctionnalité de suppression de format en dehors de l'éditeur, afin que tout le monde puisse jouer avec le code et le modifier si nécessaire.

Theming

Comme pour tous les composants de l'interface utilisateur de KendoReact pour React, l'éditeur peuvent également être personnalisées dans les trois thèmes suivants: thème Bootstrap, matériel et notre propre thème par défaut. Si vous travaillez dans votre propre système / thème de conception, vous pouvez facilement personnaliser le style de l'éditeur à l'aide de CSS ou créer votre propre thème à l'aide de KendoReact ThemeBuilder .

Sous le capot

Pour l'éditeur, nous avons décidé d'utiliser un moteur externe au lieu de mettre en œuvre notre propre à partir de zéro. Depuis que l'édition HTML existe depuis un certain temps, il existe actuellement de nombreux moteurs disponibles, et il n'y a aucune valeur ajoutée à démarrer un éditeur à partir de zéro. Après avoir évalué les options disponibles, nous avons décidé que la boîte à outils ProseMirror était le bon choix pour notre cas d'utilisation. Il est très puissant et écrit en JavaScript pur.

L'éditeur de KendoReact est un éditeur de texte riche en WYSIWYG polyvalent dont les fonctionnalités peuvent être personnalisées ou étendues pour répondre aux exigences de tout projet. Construit spécifiquement pour React, il est aussi rapide et léger que le framework lui-même et peut vous faire gagner beaucoup de temps de développement.