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

Parrainé par l'interface utilisateur de Kendo pour l'équipe Angular

Vous souhaitez en savoir plus sur la création d'excellentes applications Web angulaires? Tout commence avec Kendo UI for Angular – une bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux listes déroulantes et jauges.

L'équipe de Kendo UI for Angular s'engage à vous fournir les derniers conseils et astuces dans le monde du développement angulaire. Nous espérons que vous apprécierez le post!

Dans ce tutoriel, vous verrez à quel point il est facile de commencer à utiliser les composants Kendo UI pour Angular et comment créer un éditeur riche à l'aide du composant Editeur de Kendo UI.

Angular est un framework JavaScript permettant de créer des applications Web. Il promeut les meilleures pratiques et fournit des outils pour faciliter le processus de développement des développeurs de logiciels. Angular utilise des modèles déclaratifs, une injection de dépendance et Observables pour alimenter des applications pouvant être exécutées sur plusieurs plates-formes.

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

Pour suivre ce didacticiel, vous avez besoin d’une compréhension de base de Angular. Assurez-vous que Node et npm sont installés avant de commencer.

Si vous ne connaissez pas encore Angular, veuillez suivre le tutoriel officiel ici . Vous pouvez revenir à l'article lorsque vous avez terminé.

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

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

Initialiser application et dépendances Installation

pour Pour commencer, nous allons utiliser la CLI (interface de ligne de commande) fournie par l’équipe Angular pour initialiser notre projet.

Commencez par installer la CLI en exécutant npm install -g @ angular / cli. . npm est un gestionnaire de paquets utilisé pour installer des paquets, il sera disponible sur votre PC si vous avez Node installé, sinon téléchargez le noeud Node ici . Créer un nouveau projet angulaire t à l’aide de la CLI, ouvrez un terminal et exécutez:

 le nouvel éditeur d’angle - style  =  scss

Cette commande est utilisée pour initialiser un nouveau projet Angular. le projet utilisera SCSS comme pré-processeur. Ensuite, exécutez la commande suivante dans le dossier racine du projet pour installer les dépendances:

 ng add @ progress / kendo-angular-editor

Démarrez le serveur de développement angulaire en exécutant ng serve dans un terminal situé dans le dossier racine de votre projet.

Le composant en-tête affiche le logo de l'application et très peu d'informations. Ce composant est principalement un composant d'affichage. Exécutez la commande suivante pour créer le composant d'en-tête:

 ng générer un en-tête de composant

Ouvrez ensuite le fichier src / app / header / header.component.html et mettez-le à jour avec le code ci-dessous:

    
 < header > 
     < div   class  =  " marque "  > 
       < img   src  =  "  /assets/document.svg  "   alt  = "  avatar  " > 
       < h5 >  Come Edit  </  h5 > 
     </  div > 
 </  header > 
 

Note : Le contenu de l'image utilisé peut être trouvé ici dans le référentiel GitHub . Le logo provient de https://flaticon.com .

Nous allons ensuite styliser l’en-tête. Ouvrez le fichier header.component.scss et mettez-le à jour avec l'extrait ci-dessous:

 header  {
   display :  flex ; 
   -couleur :  blanc ; 
   marge :   0 ; 
   rembourrage :   17  px  5 % ; 
   couleur :  blanc fumée ; 
   box-shadow :   0   2  px  4  px  0   rgba  ( 0  0  0  0.1 ) ; 19659053] background :   # fbf3f259 ; 
   .brand  {
     flex :   1 ; 
     Afficher 
    .  flex ; 
     align-items :  centre ; 
     img  {
       hauteur :   35  px ; 
       b order-radius :   50% ; 
       marge-droite :   17  px ; 
    } 
     h5  { 
       taille de la police :   18  px ; 
       marge :   0 ; 
       taille de la police :  ] normal ; 
       espacement des lettres :   0,4  px ; 
       couleur :   # d8625e ; 
       opacité 
      . 19659026]:   0.7 ; 
       transformation de texte :  majuscule ; 
    } 
  } 
} 

Ici, nous avons ajouté quelques styles pour embellir l’en-tête. Ensuite, nous allons restituer le composant d’en-tête dans le fichier app.component.html ouvrir le fichier et remplacer le contenu par l’extrait ci-dessous:

   < main > 
   < app-header >   </  app-header > 
 </  main > 

Puisque nous utiliserons des polices externes, nous mettrons à jour le fichier src / index.html avec une balise link à côté de src / styles.scss [Fichier.

 
    
  
 < html   lang  =  " en "  > 
 < head > 
   < meta   charset  =  " utf-8 "  > 
   < titre >  AngularEditor  </  titre > 
   < base   href  =  " / "  > 
   < meta   name  =  " viewport "    content  =  " width = périphérique- width, initial-scale = 1  " > 
   < link   href  =  " https://fonts.googleapis.com/css?family=Rubik:400,500 "    rel  =  " feuille de style "  > 
   < link   rel  =  " icon "    type  =  " image / x- icon  "   href  = "  favicon.ico  " > 
 </  head > 
 < body > 
   < app-root >   </  app-root > 
 </  body > 
 </  html > 

Ensuite, nous choisirons Rubik dans notre famille de polices par défaut . Nous annulerons également les valeurs de remplissage et par défaut sur les éléments du corps et html . Ouvrez le fichier styles.scss et mettez-le à jour avec le contenu suivant:

 body, html  {
   margin :   0 ; 
   padding :   0 ; 
   famille de polices :   'Rubik' sans serif ; 
   couleur de fond :  whitesmoke ; 
} 

est la vue actuelle de la page après avoir rendu le composant d'en-tête:

Composant d'édition

Kendo UI fournit un composant utile pour la création de contenu à l'aide d'une simple interface WYSIWYG. Ce composant comporte un riche ensemble de commandes permettant de générer des éléments en langage de balisage.

Depuis que nous avons déjà installé le @ progress / kendo-angular-editor à l'aide de la CLI, il sera disponible dans le fichier app.module.ts .

Nous allons créer un composant d'édition qui le restituera à partir de l'interface de Kendo. composant t, exécutez la commande suivante:

 ng générer un éditeur de composants

Ouvrez le fichier editor.component.html et copiez le contenu suivant dans le fichier:

    
 < section > 
   < div > 
     < éditeur de kendo 
       (valueChange)  =  " valueChange ($ event) "  ]
    >   </  éditeur de kendo > 
   </  div > 
   < div > 
     < textarea 
       name  =  " editorOutput " 
       id  =  "" 
       cols  =  " 30 " 
       rangées  =  " 10 " 
       [innerHTML]  =  " valeur " 
    >   </  textarea > 
   </  div > 
 </  Section > 

Le modèle rendra le composant éditeur de Kendo UI et un élément textarea indiquant le balisage généré pour le contenu créé dans l'interface d'édition. Nous avons associé un écouteur d'événement au composant de kendo-editor . Ainsi, chaque fois que le contenu est mis à jour, le composant innerHTML du textarea est également mis à jour. Le composant éditeur peut prendre plusieurs contrôles parallèlement à des contrôles personnalisés pouvant être rendus dans l'élément. Vous pouvez également utiliser le composant avec les formes en attachant la directive ngModel au composant.

Nous allons ensuite ajouter quelques styles au composant. Ouvrez le fichier editor.component.scss et copiez les styles dans le fichier: section

    
  {
   width :   90% ; 
   margin :   5%  auto  0 ; 
   display :  flex ; 
   div :  nème -child  ( 1 )   {
     largeur :   57% ; 
     .k-editor  {
       de hauteur :   600  px ; 
    } 
  } 
   div :  nième enfant  ( 2 )   {
     width :   40% ; 
     marge gauche :   3% ; 
     textarea  {
       ] hauteur :   100% ; 
       largeur :   100% ; 
       bordure :   2  px solide rosée ; 
       border-radius :   4  px ; 
       taille de la police :   14  px  de l'opacité :   de 0.8 ; 
       de remplissage :   10  px  12  px ; 
    } 
  } 
} 

Ensuite, nous mettrons à jour le fichier editor.component.ts pour déclarer les variables utilisées dans le fichier modèle. Ouvrez le fichier et mettez-le à jour pour qu'il soit similaire à l'extrait ci-dessous:

 import   { Composant  OnInit }   de   '@ angular / core '; 
@  Composant  ( {
  sélecteur :   'éditeur de l'application' 
  templateUrl :   './ editor.component.html' 
  styleUrls :   [ './ editor.component.scss' ] 
} ) 
 export  classe   19659345] implémente   OnInit   {
   constructeur  ()   {} 
  valeur  =   '' ; 
   valeurChange  ( e )   {
     cette .  valeur  =  e ; 
  } 
   ngOnInit  ()   {} 
} 

Nous allons ensuite rendre le composant éditeur dans le fichier de composant principal. Ouvrez le fichier app.component.html et restituez le composant d'édition:

   < main > 
   < app-header >   </  app-header > 
   < app-editor >   </  app-editor > 
 </  main > 

Maintenant, si vous visitez http: // localhost: 4200 vous devriez voir l'éditeur affiché:

Conclusion

Dans cet article, nous avons vu comment nous pouvions utiliser l'une des collections de composants robustes de Kendo UI pour créer un éditeur WYSIWYG à contenu riche. Outre ce composant, Kendo UI fournit également des composants pouvant être facilement intégrés à toute application angulaire, tels que DatePickers Les composants DropDown Chat Interface Dialogs Grilles et beaucoup d'autres composants.Veuillez vous rendre sur la page de documentation officielle pour commencer. Vous pouvez trouver le code source de la démo ici .