Création d'un éditeur Web à l'aide de Kendo UI Vue

Dans cet article, nous allons voir comment nous pouvons créer un éditeur de contenu riche en utilisant le composant de Kendo UI et Vue.

Kendo UI est une bibliothèque utilisée pour développer des applications à un rythme relativement rapide. Il fournit des composants d'interface utilisateur pour des bibliothèques telles que jQuery, Angular, React et Vue, et contient plus de 20 composants pour créer des graphiques, des tableaux de données et des pages déplaçables, pour n'en citer que quelques-uns. développer une gamme d'applications sur différentes plates-formes. En plus de son intégration simple, de sa documentation détaillée et de sa flexibilité, Vue vous permet d'étendre le langage de modèle avec vos composants. Vue fournit également des bibliothèques pour le routage et la gestion de l'état, et nous utiliserons ce dernier dans cet article.

Nous utiliserons le composant éditeur de Kendo UI pour créer une application d'édition Web riche. Avec cette application, les utilisateurs peuvent directement convertir du texte en balisage.

Pour suivre ce tutoriel, vous avez besoin d'une compréhension de base de Vue et Node.js. Assurez-vous que Node est installé avant de commencer.

Si vous n'avez aucune connaissance préalable de Vue, veuillez suivre la documentation officielle ici . Revenez et terminez après avoir parcouru la documentation.

Nous allons créer l'application à l'aide des outils suivants:

Voici une capture d'écran de l'application que nous allons créer:

Initialisation de l'application et installation des dépendances

Pour commencer, nous utiliserons vue-cli pour amorcer notre application. Tout d'abord, nous installerons la CLI en exécutant npm install -g @ vue / cli dans un terminal.

Pour créer un projet Vue à l'aide de la CLI, nous exécuterons la commande suivante: [19659012] vue create vue-editor

Après avoir exécuté cette commande, plutôt que de sélectionner la configuration par défaut, nous opterons pour la configuration manuelle. Nous faisons cela parce que nous voulons ajouter un pré-processeur CSS dans notre application. Suivez la capture d'écran ci-dessous:

Le reste des invites peut être configuré comme il vous convient le mieux.

Ensuite, exécutez les commandes suivantes dans le dossier racine du projet pour installer les dépendances.

  npm   install  @ progress / kendo-ui @ progress / kendo-theme-default @ progress / kendo-editor-vue-wrapper

Démarrez le serveur de développement d'applications en exécutant npm run serve dans un terminal situé dans le dossier racine de votre projet.

Un onglet de navigateur doit s'ouvrir sur http: // localhost: 8080. La capture d'écran ci-dessous doit être similaire à ce que vous voyez dans votre navigateur:

Le composant d'en-tête affiche le logo de l'application et très peu d'informations. Ce composant est principalement un composant d'affichage. Créez un fichier appelé Header.vue . Ce fichier contient le composant Header . Ouvrez le fichier et suivez les étapes ci-dessous pour mettre à jour le composant:

 < template > 
   < header > 
       < div   class [19659028] =  " marque "  > 
       < img   src  =  " ../ actifs / document.svg  "   alt  = "  avatar  " > 
       < h5 > [19659041] Il suffit de modifier  </  h5 > 
     </  div > 
   </  en-tête > 
 </  modèle > 
 

Remarque : Les éléments d'image utilisés peuvent être trouvés ici dans le référentiel GitHub . Le logo a été trouvé sur https://flaticon.com .

Ensuite, nous allons styliser l'en-tête. Ajoutez les styles ci-dessous à la section styles du composant:

 < template > 
  ...
 </  modèle > 

 < style   lang  =  " css "    scoped >  
 en-tête  {
   affichage: flex;
  couleur de fond: blanc;
  marge: 0;
  rembourrage: 17px 5%;
  couleur: blanc fumée;
  boîte-ombre: 0 2px 4px 0 rgba (0, 0, 0, 0  .1 );
  arrière-plan:  # fbf3f259 ;
   .brand   {
     flex: 1;
    affichage: flex;
    align-items: centre;
    img  {
       hauteur :   35  px ; 
       border-radius :   50% ; 
       margin-right :   17  px ; 
    } 
     h5  {
       font-size :   18  px ; 
       margin :   0 ; 
       font-weight :  normal ; 
       letter-spacing :   0.4  px ; 
       couleur :   # d8625e ; 
       opacity :   0.7 ; 
       text-transform :  capitalize ; 
    } 
  } 
} 
  </  style > 

Enfin, la section script . Ajoutez la section script sous le style et copiez-y le code ci-dessous:

 < modèle > 
  ...
 </  modèle > 

 < style   lang  =  " css "    scoped >  
   ... 
  </  style > 

 < script >  
 export   par défaut   {
  nom :   "Header" 
} ; 
  </  script > 

Ici, nous avons ajouté quelques styles pour embellir l'en-tête. Ensuite, nous allons rendre le composant d'en-tête dans le fichier App.vue ouvrir le fichier et mettre à jour les sections suivant l'extrait ci-dessous:

 // src / App.vue

 < template > 
   < div   id  =  " app "  > 
     < Header  /> 
   </  div > 
 </  modèle > 

 < script >  
 import  Header  from   "./ components / Header" ; 
 export   default   {
  nom :   "app" 
  composants :   {
    En-tête 
  } 
} ; 
  </  script > 

 < style   lang  =  " scss "  >  
  #app   {
   font-family :   "Avenir" Helvetica, Arial, sans-serif ; 
   - webkit-font-smoothing :  anti-crénelé ; 
   -moz-osx-font-smoothing :  grayscale ; 
   text-align :  centre ; 
   couleur :   # 2c3e50 ; 
} 
 corps,
html  {
   margin :   0 ; 
   padding :   0 ; 
   background-color :  whitesmoke ; 
} 
  .k-editor   {
   height :   600  px ; 
} 
  </  style > 

Si vous accédez à http: // localhost: 3000, vous verrez la vue actuelle de la page après le rendu du composant d'en-tête:

Ensuite, nous allons créer le composant éditeur pour permettent aux utilisateurs de créer et d'exporter du contenu textuel riche.

Composant Editor

Kendo UI fournit un composant utile pour créer du contenu à l'aide d'une interface WYSIWYG simple. Le composant propose un ensemble complet de contrôles pour générer des éléments de langage de balisage.

Puisque nous avons déjà installé le package @ progress / kendo-vue-editor nous installerons le package en tant que plugin dans notre application.

Ouvrez le fichier main.js et utilisez le EditorInstaller :

 import  Vue  from   'vue' 
 import   '@ progress / kendo-ui' 
 import   '@ progress / kendo-theme-default / dist / all.css' 
 import   { EditorInstaller  }   de   '@ progress / kendo-editor-vue-wrapper' ; 
 import  App  from   './ App.vue' 

Vue .  use  ( EditorInstaller ) 
Vue .  config .  productionTip  =   false 

 new   Vue  ( {
  rendu :  h  =>   h  ( App ) 
} ) .  $ mount  ( '# app' ) 

Dans l'extrait ci-dessus, nous importons le package Kendo UI de base, la feuille de style de base et le plugin du package wrapper. Ensuite, nous installons le plugin en appelant Vue.use sur le plugin.

L'étape suivante consiste à créer un composant éditeur qui restitue le composant depuis Kendo UI. Créez un fichier nommé Editor.vue dans le dossier src / components puis ouvrez le fichier et mettez à jour le contenu en suivant les étapes ci-dessous:

D'abord le modèle ] section:

 < modèle > 
   < section > 
     < div > 
       < kendo-editor  : value  =  " value "    style  = " hauteur :  500  px "   : pdf  =  " pdf  "  : tools  = "  tools  " > 
       </  kendo-editor > [19659041]
     </  div > 
   </  section > 
 </  modèle > 

Le modèle rend le composant éditeur à partir de l'interface utilisateur Kendo et d'un ensemble d'outils d'édition pour gérer le contenu dans l'éditeur. Habituellement, Kendo UI fournit un ensemble d'outils par défaut si l'accessoire tools n'est pas disponible, mais comme nous avons besoin d'un outil qui n'est pas disponible dans l'ensemble d'outils par défaut, nous devons définir le nôtre.

Il existe des ensembles d'outils pour éditer le contenu et aussi un pour exporter le contenu sous la forme pdf . Le bouton déclenche un téléchargement et le contenu du pdf est similaire à celui de l'éditeur.

Ensuite, nous allons ajouter quelques styles au composant, ouvrir le fichier et le mettre à jour avec l'extrait ci-dessous:

 / / src / app / editor / editor.component.scss

 < modèle > 
  ...
 </  modèle > 

 < script >  
 import   { Editor }   from   "@ progress / kendo-editor-vue-wrapper" ; 
 export   default   {
  name :   "Editor" 
   data  ()   {
     return   {
      valeur :   "" 
      outils :   [ 'format'  'bold'   'italic'   'underline' [19659129] 'barré'   'insertFile'  'insertImage'  'insertOrderedList'   'insertUnorderedList' [19659241] 'createLink'  'indent'   'pdf' ] 
      pdf :   {
        fileName :   "editor.pdf" 
        proxyURL :   "https://demos.telerik.com/kendo-ui/service/export" 
        paperSize :   "a4" 
        marge :   {
          bas :   20 
          gauche :   20 
          droite :   20 
          top :   20 
        } 
      } 
    } ; 
  } 
} ; 
  </  script > 

 < style   lang  =  " scss "    scoped >  
 section  {
   largeur :   90% ; 
   marge :   5%  auto  0 ; 
   affichage :  flex ; 
} 
  </  style > 

Pour configurer les paramètres d'exportation PDF, utilisez l'attribut pdf . Vous pouvez spécifier le nom du fichier et des détails sur les marges, la taille du papier et la police. Vous pouvez également définir le nom du fichier pour l'exportation. Nous avons également le tableau tools qui définit les boutons de la barre d’outils.

Ensuite, nous allons rendre le composant éditeur dans le fichier du composant principal. Ouvrez le fichier App.vue et affichez le composant éditeur:

  < template > 
   < div   id  = [19659023] " app "  > 
     < En-tête  /> 
     < Editeur  /> 
   </  div > 
 </  modèle > 

 < script >  
 import  Editor  from   "./ components / Editor" ; 
 import  Header  from   "./ components / Header" [19659023]; 
 export   par défaut   {
  nom :   "app" 
  composants :   {
    En-tête 
    Éditeur
  } 
 } ; 
  </  script > 

 < style >  
   ... 
  </  style > 

Maintenant, si vous visitez http: // localhost: 4200, vous devriez voir l'éditeur affiché et aussi, cliquer sur l'icône pdf déclenche une boîte de dialogue de téléchargement pour enregistrer le contenu de l'éditeur au format pdf. [19659004]

Conclusion

Dans cet article, nous avons vu comment nous pourrions utiliser l’une des solides collections de composants de Kendo UI pour créer un éditeur WYSIWYG riche en contenu. Parallèlement à ce composant, Kendo UI fournit également des composants qui peuvent être facilement intégrés dans n'importe quelle application, comme DatePickers DropDown components, Chat interface Dialogs Grilles et une charge d'autres composants. Visitez leur page de documentation officielle pour commencer. Vous pouvez trouver le code source de la démo ici .