Ajouter un composant éditeur en toute simplicité

Les éditeurs de texte enrichi sont utilisés dans de nombreuses applications React. Heureusement, vous n'êtes pas obligé d'en créer un vous-même. Dans cet article, vous apprendrez à ajouter facilement un éditeur de texte enrichi React à l'aide de la bibliothèque de composants KendoReact et à implémenter certaines de ses fonctionnalités impressionnantes.

Fréquemment utilisé dans les applications React, un éditeur de texte enrichi ou un éditeur WYSIWYG vous voyez ce que vous obtenez) est un excellent moyen de permettre aux utilisateurs de créer du texte riche avec des listes, des images, des vidéos et plus encore. Heureusement, vous n'avez pas à en créer un vous-même, car il existe des éditeurs prêts à l'emploi qui offrent une variété de fonctionnalités. Dans cet article, vous apprendrez à ajouter facilement un React Rich Text Editor à partir de la bibliothèque de composants KendoReact et à implémenter certaines de ses fonctionnalités phares.

L'éditeur de texte enrichi KendoReact se construit sur la boîte à outils ProseMirror étendant ses capacités solides avec des fonctionnalités telles que édition de démarque plugins et exportation au format PDF et Excel. KendoReact propose une installation extrêmement simple, trois thèmes à choisir (ou à personnaliser), ainsi qu'une multitude de fonctionnalités qui ne sont normalement pas présentes dans les bibliothèques de composants React UI prêtes à l'emploi.

Project Setup [19659005] Avant de commencer, nous devons créer un projet React. Pour créer rapidement un nouveau projet, vous pouvez utiliser Create React App ou Vite . Pour cette démo, nous allons utiliser Create React App. Vous pouvez créer un projet React en exécutant l'une des commandes ci-dessous dans votre terminal.

 npx create-react-app my-kendo-react-editor
cd my-kendo-react-editor
npm début

KendoReact propose un éditeur React puissant et riche en fonctionnalités. Il fournit de nombreuses fonctionnalités utiles et, pour cette raison, nécessite quelques dépendances. Ci-dessous, vous pouvez voir la liste des bibliothèques que nous devrons installer.

• @ progress / kendo-react-editor
• @ progress / kendo-react-intl
• @ progress / kendo-drawing
• @ progress / kendo-licensing
• @ progress / kendo-react-boutons
• @ progress / kendo-react-dialogs
• @ progress / kendo-react-dropdowns
• @ progress / kendo-react-inputs
• @ progress / kendo-react-layout
• @ progress / kendo-react-pdf
• @ progress / kendo-react-popup
• @ progress / kendo-react-progressbars
• @ progress / kendo-react-treeview

Vous pouvez copier le texte ci-dessous et le coller dans votre terminal. Si vous utilisez yarn remplacez simplement npm install par yarn add .

 npm install @ progress / kendo-react-editor @ progress / kendo -react-intl @ progress / kendo-drawing @ progress / kendo-licensing @ progress / kendo-react-buttons @ progress / kendo-react-dialogs @ progress / kendo-react-dropdowns @ progress / kendo-react-inputs @progress / kendo-react-layout @ progress / kendo-react-pdf @ progress / kendo-react-popup @ progress / kendo-react-progressbars @ progress / kendo-react-treeview

Outre les dépendances requises par l'éditeur de texte enrichi, nous devons également installer l'un des thèmes Kendo UI . Pour cette démo, nous allons utiliser le Thème par défaut développé par les experts UX de Progress Telerik.

 npm install --save @ progress / kendo-theme-default

Ensuite, nous devons importer les styles de thème dans le fichier App.jsx .

 import   '@ progress / kendo-theme-default / dist / all.css' [19659028]; 

Note sur le paquetage kendo-licensing : KendoReact est une bibliothèque d'interface utilisateur développée par des professionnels et distribuée sous une licence commerciale. Son utilisation nécessite soit une clé de licence commerciale, soit une clé de licence d'essai active, facilement acquise en suivant ces étapes .

Nous avons mis en place toutes les bases. Ajoutons un éditeur à l'application React.

Ajout de l'éditeur KendoReact à une application React

Commençons par créer un fichier de contenu qui contiendra le texte initial de l'éditeur.

src / content.js [19659034] const content = `

L'éditeur KendoReact permet à vos utilisateurs d'éditer du HTML d'une manière familière et conviviale.
L'éditeur fournit le moteur d'édition HTML de base, qui comprend mise en forme du texte, hyperliens et listes. Le composant produit un code HTML identique dans tous les principaux navigateurs, suit les normes d'accessibilité et fournit une API pour la manipulation de contenu.

Les fonctionnalités incluent:

• Formatage du texte
• Listes à puces et numérotées
• Hyperliens [19659038] Prise en charge de plusieurs navigateurs
• Sortie HTML identique dans tous les navigateurs

` ;

exportation default content ;

src / App.css

 .app   {
   max-width :   1180  px ; 
   margin [19659028]:   0  auto ; 
   padding :   2  rem ; 
} 

src / App.js

 import  React  from   "react" ; 
 import   "./ App.css" ; 
 import   { Editor  EditorTools }   from   "@ progress / kendo-react-editor" ; [19659063] import  contenu  de   "./ content" ; 

 const   {
  Gras 
  Italique 
  Souligner 
  AlignLeft 
  AlignRight 
  AlignCenter 
  Retrait 
  Outdent 
  OrderedList 
  UnorderedList 
  Annuler 
  Refaire 
  Lien 
  Dissocier 
}   =  EditorTools ; 

 function   App  ()   {
   return   ([19659085] < div   className  =  " app "  > 
       < Editor 
         tools  =  { [
           [ Gras  Italique  Souligné ] 
           [ Annuler  Refaire ] 
           [ Link  Unlink ] 
           [ AlignLeft  AlignCenter  AlignRight ] 
           [ OrderedList  UnorderedList  Indent  Indent  ] Outdent ] 
        ] }  
         contentStyle  =  { { height :   320 [19659067]} }  
         defaultContent  =  { content } 
       />  
     </  div  > 
  ) ; 
} 

 export   default  App ; 

Vous trouverez ci-dessous un exemple d'implémentation StackBlitz interactif de l'éditeur KendoReact WYSIWYG.

Fonctionnalités de l'éditeur React

L'éditeur de texte riche de KendoReact offre de nombreuses fonctionnalités utiles, et nous allons maintenant en couvrir quelques-unes. que l'on ne trouve pas souvent dans les éditeurs React WYSIWYG.

Rechercher et remplacer

L'une des fonctionnalités notables fournies par l'éditeur KendoReact est «Rechercher et remplacer». L'ajouter à l'éditeur est aussi simple que de passer le composant FindAndReplace dans l'accessoire tools comme illustré ci-dessous.

src / App.js

 import  React  from   "react" ; 
 import   "./ App.css" ; 
 import   { Editor  EditorTools }   from   "@ progress / kendo-react-editor" ; 
 import  content  from   "./ content "; 

 const   {
  FindAndReplace 
}   =  EditorTools ; 

 function   App  ()   {
   return   ([19659085] < div   className  =  " app "  > 
       < Editor 
         tools  =  { [
           [ FindAndReplace ] 
        ] }  
         contentStyle  =  { { height :   320  } }  
         defaultContent  =  { content } 
       />  
     </  div > 
  ) ; 
} 

 export   default  App ; 

Le modal «Rechercher et remplacer» fournit des filtres améliorés qui peuvent être utilisés pour faire correspondre une casse spécifique, des mots entiers uniquement, cycliques, ainsi que des expressions régulières. Après avoir trouvé une correspondance, vous pouvez remplacer le mot spécifique ou tous les mots correspondants par un autre texte.

Imprimer et exporter au format PDF

Il existe des scénarios dans lesquels il est intéressant de permettre aux utilisateurs de imprimer ou exporter le contenu de l'éditeur vers un PDF. Avec KendoReact Editor, l'ajout de ces fonctionnalités est un jeu d'enfant car – comme dans l'exemple précédent – il suffit d'ajouter plus d'outils d'édition, appelés Print et Pdf et de les transmettre au Editor component.

src / App.js

 import  React  from   "react" ; 
 import   ] "./ App.css" ; 
 import   { Editor  EditorTools }   from   "@ progress / kendo-react -editor "; 
 import  content  from  " ./ content "; 

 const   { FindAndReplace  Pdf  Print }   =  EditorTools ; 

 function   App  ()   {
   return [19659067] (
     < div   className  =  " app "  [19659028]> 
       < Outils de l'éditeur 
          =  { [ [ FindAndReplace  Pdf  Imprimer ] ] }  
         contentStyle  =  { { hauteur :   320  } [19659028]}  
         defaultContent  =  { content } 
       />  
     </  div > 
  ) ; 
} 

 exportation   par défaut  App ; 

De plus, il est possible de personnaliser le PDF exporté. Pour ce faire, créez un composant wrapper autour du composant Pdf fourni par KendoReact et transmettez les options souhaitées à savePdfOptions prop.

 import  React  from   "react" ; 
 import   "./ App.css" ; 
 import   { Editor  EditorTools } [19659045] de   "@ progress / kendo-react-editor" ; 
 import  content  from   "./ content" ; 

 const   ] { FindAndReplace  Pdf  Print }   =  EditorTools ; 

 const   CustomPdf   =  props  =>   (
   < Pdf 
     { ...  props } 
     savePdfOptions  =  { {
      fileName :   "React Rich Text Editor" 
      paperSize :   "A4" 
      marge :   "3cm" 
    } } 
   />  
) ; 

 function   App  ()   {
   return   (
     < div   className  =  " app "  [19659028]> 
       < Outils de l'éditeur 
          =  { [ [ FindAndReplace  CustomPdf  Imprimer ] ] }  
         contentStyle  =  { { height :   320  }  }  
         defaultContent  =  { content } 
       />  
     </  div > 
  ) [19659028]; 
} 

 exportation   par défaut  App ; 

Dans le code ci-dessus, nous avons configuré le nom du fichier, la taille du papier et la marge. Vous pouvez trouver toutes les options PDF possibles ici .

Coller à partir de Word / Excel / Outlook

Un autre avantage de l'éditeur de texte enrichi KendoReact est le fait qu'il conserve une mise en forme correcte lors du collage à partir d'autres logiciels, tels que Microsoft Office Word, Excel et Outlook. Ci-dessous, vous pouvez voir de courts GIF qui montrent le collage du contenu de Word et Excel dans l'éditeur KendoReact WYSIWYG. Comme vous le verrez, l'éditeur préserve la mise en forme, les liens, les titres et, dans le cas d'un collage à partir d'Excel, il crée même un tableau bien formaté.

Coller à partir de Microsoft Word

Coller à partir de Microsoft Excel

Accessibilité, globalisation et prise en charge RTL

Les applications peuvent servir les utilisateurs du monde entier, et il est crucial de fournir une expérience accessible et facile à utiliser. Tout d'abord, l'éditeur KendoReact suit les normes d'accessibilité, de sorte que les utilisateurs handicapés et handicapés peuvent l'utiliser. De plus, il a également un grand soutien pour l’internationalisation. Par défaut, les outils d'édition sont en anglais, comme indiqué sur l'image ci-dessous:

Cependant, nous pouvons facilement fournir nos propres traductions pour les outils d'édition. Tout d'abord, nous devons créer un objet avec des messages de traduction. Vous trouverez ci-dessous un exemple pour la langue allemande.

src / deMessages.js

 export   const  deMessages  =   {
  éditeur :   {
    gras :   "Fett" 
    italique :   "Kursiv" 
    souligné :   "Unterstrichen" 
    barré :   "Durchgestrichen" 
    indice :   "Tiefgestellt" 
    exposant :   "Hochgestellt" 
    hyperlien :   "Hyperlink einfügen" 
     "hyperlink-dialog-title" :   "Hyperlink einfügen" 
     "hyperlink-dialog-content -adresse ":  " Web-Adresse "
    " hyperlink-dialog-content-title ":  " Titel "
    " hyperlien -dialog-content-newwindow ":  " Link in einem neuen Fenster öffnen "
    " hyperlink-dialog-cancel ":  " Abbrechen "
     "hyperlink-dialog-insert" :   "Einfügen" 
    image :   "Bild einfügen" 
     "image-dialog-title" :   "Bild einfügen" 
     "image-address" [19659028]:   "Web-Adresse" 
     "image-title" :   "Titel" 
     "image-altText" : [19659027] "Abwechselnder Text" 
     "image-width" :   "Breite (px)" 
     "image-height" :   "Höhe (px)" 
     "image-cancel" :   "Abbrechen" 
     "image-insert" :   "Einfügen" 
    viewHtml :   "HTML anzeigen" 
     "viewHtml-dialog-title" :   "HTML anzeigen" 
     "viewHtml-cancel" [19659028]:   "Abbrechen" 
     "viewHtml-update" :   "Aktualisieren" 
    Dissocier :   "Hyperlink entfernen" 
    annuler :   "Rückgängig machen" 
    refaire :   "Wiederholen" 
    fontSize :   "Größe" 
    fontName :   "Schrift" 
    format :   "Absatzstil" 
    alignLeft :   "Linksbündig" 
    alignRight :   "Rechtsbündig" 
    alignCenter :   "Zentriert" 
    tiret :   "Einzug vergrößern" 
    outdent :   "Einzug verkleinern" 
    orderList :   "Numerierte Liste" 
    bulletList :   "Aufzählliste" 
  } 
} ; 

Ensuite, nous devons utiliser la méthode loadMessages du package @ progress / kendo-react-intl et LocalizationProvider de sorte que l'éditeur React WYSIWYG peut accéder aux traductions. Les paramètres régionaux actuels peuvent être spécifiés en passant le paramètre language au LocalizationProvider . Voir l'exemple de code ci-dessous.

src / App.js

 import  React  from   "react" ; 
 import   " ./App.css"[19659028Often;[19659063</font>import[19659067</font>{ Editor  EditorTools }   from   "@ progress / kendo-react-editor "; 
 import   { loadMessages  LocalizationProvider }   from  " @ progress / kendo-react-intl "; 
 import   { deMessages }   from   "./ deMessages" ; 
 import  content  from   "./ content "; 

 loadMessages  ( deMessages  " de ") ; 

 const   {
  FindAndReplace 
  Pdf 
  Gras 
  Italique 
  Souligner 
  AlignLeft 
  AlignRight 
  AlignCenter 
  Retrait 
  Outdent 
  OrderedList 
  UnorderedList 
  Annuler 
  Refaire 
  Lien 
  Dissocier 
}   =  EditorTools ; 

 function   App  ()   {
   return   ([19659085] < LocalizationProvider   language  =  " de "  > 
       < div   className  =  " app "  > 
         < Editor 
           tools  =  { [
             [ Gras  Italique  Souligné ] 
             [ Annuler  Rétablir ] [19659518] [ Link  Unlink ] 
             [ AlignLeft  AlignCenter  AlignRight  ] 
             [ OrderedList  UnorderedList  Indent  Outdent ] 
             [ FindAndReplace  Pdf ] 
          ] }  
           contentStyle  =  { { ] height :   320  } }  
           defaultContent  =  { content }  
         /> [19659090] </  div >  
     </  LocalizationProvider > 
  ) ; 
} 

 export   default  App ; 

Si vous avez plus de traductions, vous pouvez appeler la fonction loadMessages plusieurs fois. Désormais, chaque fois que vous survolez les outils de l'éditeur, les étiquettes doivent être en allemand, comme indiqué dans le GIF ci-dessous.

]

Enfin, si vous avez des utilisateurs dont la langue principale utilise les scripts de droite à gauche, l'éditeur peut être mis en mode RTL simplement en passant le dir = "rtl" prop. [19659555] < Editeur
dir = "rtl"

/ >

L'image ci-dessous montre à quoi devrait ressembler l'éditeur après avoir changé la direction du texte en RTL.

Style de l'éditeur et prise en charge des thèmes

KendoReact propose trois thèmes prêts à l'emploi: Default, Bootstrap et Material. Au début de cette démo, nous avons installé et importé le thème par défaut. Cependant, si vous souhaitez modifier les styles de thème par défaut, vous pouvez facilement le faire.

Initialement, l'éditeur KendoReact est rendu dans un iframe, car de cette façon, les styles d'application ne modifieront pas accidentellement le style de l'éditeur, mais il peut également être rendu dans un mode div .

Nous allons passer par trois manières différentes de styliser et de thématiser l'éditeur KendoReact:

• en mode frame
• en mode div
• via variables SCSS de thème

Pour plus de détails sur le style, vous pouvez vous référer à ce blog: Comment ajouter des styles personnalisés aux composants KendoReact avec Sass .

Mise à jour des styles de l'éditeur KendoReact en mode «iframe» [19659570] La mise à jour des styles dans le mode iframe est un peu plus complexe que dans le mode div car nous devons injecter des styles dans l'iframe.

Nous pouvons le faire en passant un rappel à l'accessoire onMount . Le rappel recevra un événement comme premier argument par lequel nous pouvons accéder à l'élément DOM à l'intérieur de l'iframe . C'est à ce moment que nous pouvons créer un nouveau nœud de texte de style et l'injecter.

Dans l'extrait ci-dessous, nous modifions la taille de police et la couleur par défaut du contenu de l'éditeur.

src / App.js

 const  editorStyles  =   `
    .k-content {
      taille de la police: 24px;
      couleur: # 92400E;
    }
` ; 

 function   App  ()   {
   const   onMount   =  event  => [19659067] {
     const  iframeDocument  =  event .  dom .  ownerDocument ; 
     const  style  =  iframeDocument .  createElement  ( "style" ) ; 
    style .  appendChild  ( iframeDocument .  createTextNode  ( editorStyles ) ) ; 
    iframeDocument .  head .  appendChild  ( style ) ; 
  } ; 

   return   ([19659085] < div   className  =  " app "  > 
       < Editor 
         tools  =  { [
           [ FindAndReplace  Pdf  Print ] 
        ] }  
         contentStyle  =  { { height :   320  } }  
         defaultContent  = [19659028] { contenu }  
         onMount  =  { onMount } 
       />  
     </  div > 
  ) ; 
} 

 export   default  App ; 

Ci-dessous, vous pouvez voir à quoi devrait ressembler l'éditeur maintenant. La taille de la police doit être plus grande et la couleur doit être brunâtre.

Mise à jour des styles de l'éditeur KendoReact en mode «div»

Pour changer le mode éditeur d'une iframe à div, nous pouvons passer le defaultEditMode = "div" prop.

 < Editor
  defaultEditMode  =  "div" 
  
   / > 

Nous n'avons plus besoin du rappel onMount. Au lieu de cela, nous pouvons nous diriger vers le fichier App.css et y ajouter nos propres styles.

src / App.css

 .k-editor   .k-editor- content   {
   font-size :   22  px ; 
   color :   # 53d2fa ; 
 } 

Ci-dessous, vous pouvez voir à quoi devrait ressembler l'éditeur maintenant. La taille de la police doit être un peu plus grande et la couleur doit être bleuâtre.

Remplacement des variables SCSS du thème

Une autre façon de mettre à jour les styles de l'éditeur consiste à personnaliser le thème. Tout d'abord, assurez-vous d'installer le package sass en exécutant npm install sass ou yarn add sass car le thème de l'interface utilisateur de Kendo peut être personnalisé en remplaçant les variables SCSS. De plus, supprimez les styles ajoutés dans la section précédente du fichier App.css . Ensuite, nous devons créer un nouveau fichier appelé theme.scss et déplacer l'importation de thème du fichier index.js .

src / theme.scss

 ] @import   "@ progress / kendo-theme-default / dist / all.scss" ; 

Notez que l'extension d'importation du thème Kendo UI est passée de all.css à all.scss . Enfin, importez le fichier theme.scss .

src / index.js

 import  React  de   "react"  ; 
 import  ReactDOM  de   "react-dom" ; 
 import   "./ index.css" ; 
 import   "./theme.scss"[19659028Often;[19659044Often App  from  " ./ App "; 

ReactDOM .  render  (
   < React .  StrictMode > 
     < App  / > [19659689] < /  React .  StrictMode > 
  document .  getElementById  ( "root" ) 
) ; 

Les styles devraient fonctionner comme avant, alors maintenant, remplaçons certains d’entre eux. Revenez au fichier theme.scss .

src / theme.scss

 $ editor-border-width  :   3  px ; 
 $ editor-font-size  :   25  px ; 
 $ editor-font-family  : [19659027] "Helvetica Neue" Arial, sans-serif ; 
 @import   "@ progress / kendo-theme-default / dist / all.scss" ; 

Nous avons changé la largeur par défaut de la bordure, la taille de la police et la famille de polices. Si vous souhaitez essayer les méthodes que nous venons de décrire, voici un projet StackBlitz interactif:

Pour en savoir plus sur la personnalisation des thèmes KendoReact, consultez la page de documentation Styling & Themes .

Conclusion

KendoReact propose un éditeur React WYSIWYG très puissant et riche en fonctionnalités. C'est un excellent choix lorsque vous souhaitez fournir à vos utilisateurs des fonctionnalités de texte enrichi. Nous n'avons couvert que quelques fonctionnalités de l'éditeur KendoReact, vous devriez donc absolument consulter la documentation pour en savoir plus sur toutes les fonctionnalités qu'il offre.