Fermer

juillet 6, 2022

Configuration de l’interface utilisateur de Kendo pour l’éditeur de texte enrichi angulaire

Configuration de l’interface utilisateur de Kendo pour l’éditeur de texte enrichi angulaire


L’interface utilisateur de Kendo pour l’éditeur de texte enrichi d’Angular est probablement exactement ce que vous voulez pour permettre à vos utilisateurs de saisir du texte formaté (bien que non structuré). Mais vous avez beaucoup d’options de personnalisation si vous voulez en profiter pour obtenir exactement l’éditeur que vous voulez.

Même si nous aimons structurer nos données dans des tables de base de données relationnelles, c’est une application inhabituelle qui n’a pas besoin de certains ettexte structuré : notes, descriptions, instructions de livraison – en gros, tout ce qui est stocké sous la forme d’un gros bloc de texte que nous utilisons comme une seule unité. Le problème est que les gros blocs de texte sont difficiles à lire à moins que l’utilisateur ne puisse formater ce texte pour le rendre utile au lecteur.

Interface utilisateur de Kendo pour Angularc’est Éditeur de texte enrichi facilite l’ajout d’un éditeur de texte enrichi à vos composants angulaires pour répondre à ce besoin. L’éditeur accepte et génère du code HTML afin que vos entrées et vos sorties soient entièrement textuelles. La quantité de texte formaté peut être importante, mais tout peut être stocké dans une colonne de texte de votre base de données (ou sous forme de document dans votre base de données NoSQL).

Je ne peux pas vous donner un meilleur exemple de ce que les utilisateurs peuvent faire avec l’éditeur que l’exemple du site Telerik.

Une capture d'écran de l'éditeur de texte enrichi intégré dans un composant en cours d'exécution. En haut de l'éditeur se trouve une barre d'outils avec un ensemble de boutons groupés pour mettre en gras, en italique ou souligner du texte. À côté se trouve une liste déroulante de styles, actuellement définie sur

De toute évidence, l’utilisateur qui a tout fait dans ce graphique avait beaucoup trop de temps libre… et vous voudrez peut-être configurer l’éditeur pour fournir moins d’options (ou plus). La mise en place et le fonctionnement de l’éditeur, ainsi que sa configuration, est le sujet de cet article.

Installation

Votre première étape, bien sûr, consiste à ajouter l’éditeur à votre projet Angular. Vous pouvez le faire avec la commande npm standard (j’utilise Visual Studio 2022 pour créer l’étude de cas pour cet article, j’ai donc utilisé la fenêtre Developer PowerShell pour cela, en l’ouvrant à partir du choix de menu Affichage | Terminal de Visual Studio).

npm i --save @progress/kendo-angular-editor

Mais si vous voulez exploiter pleinement l’éditeur, vous aurez besoin de tous ces autres modules (et, croyez-moi, vous les voulez). Si vous vous en tenez à npm, leur installation ressemblera à ceci :

npm install --save @progress/kendo-angular-editor @progress/kendo-angular-buttons @progress/kendo-angular-common @progress/kendo-angular-dialog @progress/kendo-angular-dropdowns @progress/kendo-angular-treeview @progress/kendo-angular-inputs @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-angular-popup @progress/kendo-angular-toolbar @progress/kendo-drawing @progress/kendo-licensing

Alternativement, vous pouvez utiliser la commande ng add et obtenir tout ce que vous voulez avec une seule commande :

ng add @progress/kendo-angular-editor

Comme avantage, ng add enregistrera également le thème par défaut de l’interface utilisateur Kendo pour styliser votre application.

Première utilisation (et contrôle du collage)

L’ajout de l’éditeur à votre page pour qu’il affiche du texte au format HTML (tout en permettant à l’utilisateur de modifier et de formater ce contenu) nécessite simplement de définir le paramètre kendo-editor Composants value propriété d’entrée à une propriété de votre composant.

Cet exemple lie l’éditeur à une propriété dans le composant appelé notes:

template: `
<kendo-editor
[(value)]="notes">`

Après cela, il suffit d’ajouter que notes propriété à votre composant et en le définissant sur une combinaison de texte et HTML :

public notes: string = `
  <div>
        …html and text….
  </div>
`;

Intégration dans un formulaire

Bien sûr, dans la vraie vie, votre éditeur ne sera probablement pas la seule chose sur votre page – votre utilisateur saisira son texte non structuré sous forme de notes ou de champ de description sous une forme plus grande. Vous intégrez votre éditeur dans un formulaire comme n’importe quel autre élément HTML ou composant angulaire : au lieu d’utiliser la propriété value de l’éditeur, utilisez un sélecteur ngModel pour lier l’éditeur à une propriété dans l’objet modèle de votre formulaire (n’oubliez pas d’ajouter également un name à l’éditeur pour prendre en charge cette liaison de données).

Cet exemple lie l’éditeur à une propriété appelée notes sur un objet de modèle appelé currentCustomer:

template: `
<p>Customer Notes: <kendo-editor
                              [(ngModel)]="currentCustomer.notes"
               		               name="currentCustomer.notes"
                             		 style="height:200px; width:300px">
         </kendo-editor>

Contrôle de la qualité HTML

Comme avec tout autre outil de saisie, vous souhaiterez contrôler la qualité des données saisies. Bien que l’éditeur génère un bon code HTML multiplateforme, les utilisateurs ne sont pas limités à simplement taper dans l’éditeur, ils peuvent également y coller du contenu (et en copier également, bien sûr). Selon la source—<cough>Microsoft Word</cough>– vous voudrez peut-être envisager de limiter le code HTML que votre utilisateur peut coller dans votre éditeur.

L’éditeur vous laissera préciser, parmi d’autres possibilitésles balises ou attributs spécifiques que vous souhaitez supprimer du contenu collé (par exemple, les balises de script, les balises spécifiques à Microsoft Office, les attributs de style) ou si vous souhaitez que les listes Microsoft Office soient automatiquement converties en listes HTML.

Pour contrôler ce que vous voulez faire du contenu collé dans l’éditeur, il vous suffit de définir le pasteCleanupSettings propriété d’entrée à une propriété de composant contenant un pasteCleanupSettings objet. Après cela, il vous suffit de définir les propriétés de cet objet pour spécifier ce que vous êtes prêt à accepter.

Cet exemple lie mon éditeur à un objet dans une propriété appelée pasteSettings:

template: `
<kendo-editor
[(value)]="notes"
[pasteCleanupSettings]="pasteSettings">  
</kendo-editor>`

Ce code configure l’objet en ce sens pasteSettings pour supprimer tout code HTML non valide et convertir ou supprimer les fonctionnalités spécifiques à Microsoft Office :

public pasteSettings: PasteCleanupSettings = {};

constructor(http: HttpClient) {
    this.pasteSettings = {
        removeInvalidHTML: true,
        convertMsLists: true,
        removeMsClasses: true,
        removeMsStyles: true
    };

Contrôle de la taille

Après avoir contrôlé quel code HTML peut être collé dans votre texte, la prochaine zone que vous voudrez peut-être gérer est la taille de la fenêtre de votre éditeur. L’option la plus simple consiste à définir votre fenêtre sur une taille fixe à l’aide de l’attribut de style de l’éditeur.

Cet exemple définit à la fois la hauteur et la largeur de la fenêtre de l’éditeur dans l’attribut style :

template: `
<kendo-editor 
[(value)]="notes"
style="height:200px; width:300px;">
</kendo-editor>`

Si vous souhaitez laisser votre utilisateur redimensionner la fenêtre de l’éditeur, définissez simplement la propriété d’entrée redimensionnable de l’éditeur sur true (l’attribut style contrôlera toujours la taille initiale de l’éditeur). Lorsque la propriété resizable est définie sur true, comme dans cet exemple, une poignée de redimensionnement apparaît dans le coin inférieur droit de l’éditeur que l’utilisateur peut faire glisser pour modifier la taille de l’éditeur :

template: `
<kendo-editor 
[(value)]="notes"
		[resizable]="true"
style="height:200px; width:300px;">
</kendo-editor>`

Vous pouvez également limiter la capacité de l’utilisateur à redimensionner la fenêtre à une hauteur et une largeur maximales et minimales. Pour ce faire, importez d’abord le EditorResizableOptions de @progress/kendo-angular-editor. Ensuite, créez un EditorResiableOptions objet et définissez son minWidth/minHeight/maxWidth/maxHeight properties pour contrôler la taille ou la taille que vous souhaitez laisser à la fenêtre de l’éditeur.

Dans les exemples précédents, l’attribut style de mon éditeur a défini la hauteur initiale de l’éditeur sur 200 pixels et sa largeur initiale sur 300 pixels. Ce code crée un ensemble d’options qui limitent l’utilisateur à redimensionner l’éditeur à la moitié (ou au double) de ces paramètres :

public editorSizeManager: EditorResizableOptions = {};

constructor(http: HttpClient) {
    this.editorSizeManager = {       
      minHeight: 100,
      maxHeight: 400,
      minWidth: 150,
      maxWidth: 600
    };
}

Et ce balisage applique cet objet à mon éditeur :

template: `
<kendo-editor
[(value)]="notes"
[resizable] = editorSizeManager 
style="height:200px; width:300px;">                                        
</kendo-editor>`

Par défaut (et en supposant que vous avez installé toutes les dépendances de l’éditeur), la barre d’outils de l’éditeur offre à votre utilisateur plus de 15 options pour formater son texte. C’est beaucoup de choix – sur les écrans étroits, la barre d’outils réduit automatiquement les options qui ne rentrent pas dans la barre d’outils dans un menu de débordement, marquant ce menu avec les trois points verticaux standard.

Vous souhaiterez peut-être limiter ce que l’utilisateur peut faire de votre texte incorporé, vous ne voudrez peut-être pas donner à l’utilisateur la possibilité d’ajouter des liens hypertexte ou d’insérer des images, par exemple. Pour réduire les options de l’utilisateur, vous pouvez désactiver tous les boutons de la barre d’outils (laissant l’utilisateur avec les raccourcis clavier dont il se souvient) en ajoutant un vide kendo-toolbar composant à l’intérieur de votre kendo-editor élément. C’est ce que fait ce balisage :

template: `
<kendo-editor
[(value)]="notes"
style="height: 300;">
<kendo-toolbar>
</kendo-toolbar>
</kendo-editor>`

Cela semble dur – généralement, vous souhaiterez ajouter de manière sélective des éléments de barre d’outils à la barre d’outils. Vous faites cela en ajoutant, à l’intérieur du kendo-toolbar composant, un kendo-toolbar-button composant pour chaque bouton que vous souhaitez rendre disponible. Vous n’êtes pas limité aux boutons de la barre d’outils par défaut et pouvez puiser dans toutes les composants de barre d’outils disponibles.

D’un point de vue UX, comme il existe une variété de types de boutons de barre d’outils (boutons pour formater le texte, pour aligner le texte, pour créer des tableaux, etc.), vous pouvez organiser les boutons en groupes significatifs. Vous pouvez le faire avec kendo-toolbar-buttongroup ou kendo-toolbar-separator composants au sein du kendo-toolbarainsi que les boutons.

Cet exemple donne à l’utilisateur les trois formats de police de base (gras, italique et souligné), ainsi que les boutons Annuler et Rétablir. Les boutons organisés en deux groupes sur la barre d’outils à l’aide de groupes de boutons et de séparateurs (les boutons de mise en forme sont séparés des boutons Annuler/Rétablir) :

template: `
<kendo-editor
 [(value)]="notes"
style="height: 300;">
  <kendo-toolbar>
    <kendo-toolbar-buttongroup>
      <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
    </kendo-toolbar-buttongroup>
    <kendo-toolbar-separator></kendo-toolbar-separator>
    <kendo-toolbar-buttongroup>
      <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>
    </kendo-toolbar-buttongroup>        
  </kendo-toolbar>
</kendo-editor>

Le menu résultant ressemblerait à ceci :

Le haut de la fenêtre de l'éditeur affichant la barre d'outils. À l'extrémité gauche de la barre d'outils se trouvent les boutons standard pour les textes en gras, en italique et soulignés sans espace entre eux. Ils ne sont suivis que d'un espace avec une fine ligne verticale en son milieu. À droite de l'espace se trouvent les boutons standard d'annulation et de rétablissement sans espace entre eux.

Encore une chose à propos des boutons de formatage du texte : Par défaut, les boutons de formatage du texte ne s’appliquent qu’aux choisi texte—l’utilisateur doit d’abord sélectionner un mot entier avant de pouvoir le formater, par exemple. Si vous préférez autoriser les utilisateurs à formater un mot simplement en cliquant à l’intérieur, vous pouvez le faire en définissant le applyToWord propriété d’entrée de l’éditeur sur true :

template: `
<kendo-editor
[applyToWord]="true"
[(value)]="notes">
</kendo-editor>`

Si vous le souhaitez, vous pouvez définir le applyToWord propriété à un ApplyToWordsOptions objet pour définir quels délimiteurs marquent le début et la fin d’un « mot ».

Contrôle de l’apparence du contenu

Vous pouvez également contrôler le style appliqué au texte lorsque l’utilisateur formate le texte dans l’éditeur. Lorsque l’utilisateur clique sur le bouton Gras, par exemple, l’éditeur habille le texte sélectionné dans un <strong> élément—vous pouvez décider ce que
<strong> l’élément ressemble lorsqu’il est affiché à l’écran. Vous avez trois options ici.

Votre première option est de ne rien faire et d’avoir les règles de style du Interface utilisateur Kendo pour le thème angulaire vous avez utilisé avec votre projet appliqué.

Votre deuxième option consiste, au lieu d’utiliser le thème de l’interface utilisateur Kendo, à appliquer les styles que vous avez définis dans la propriété styles de votre composant au texte dans la fenêtre de l’éditeur. C’est un bon choix si :

  • Vous ne voulez pas que votre composant utilise le thème de l’interface utilisateur Kendo (probablement parce que vous appliquez la feuille de style de votre organisation à votre composant, bien que vous devriez vraiment étudier l’utilisation du Générateur de thèmes Kendo UI Sass pour déployer un thème Angular qui correspond aux standards de votre entreprise)

et

  • Vous voulez que le texte de votre éditeur corresponde aux styles du reste de votre page

Par défaut, l’éditeur est isolé du reste de la page en étant enfermé dans une iframe. Pour que l’éditeur utilise les styles appliqués dans le reste de la page, il vous suffit de désactiver l’iframe en définissant le iframe propriété d’entrée à false.

Cet exemple définit la propriété iframe sur false pour que l’éditeur sélectionne les styles utilisés dans le reste de la page :

template: `
<kendo-editor
		[(value)]="notes"
[iframe]="false">
	</kendo-editor>`

La troisième option vous permet d’appliquer des règles de style spéciales uniquement dans votre éditeur (c’est-à-dire que vous ne le faites pas souhaitez utiliser le thème de l’interface utilisateur Kendo et tu ne le faites pas voulez que le texte de l’éditeur ressemble au reste de la page). Pour implémenter cette option, vous devez d’abord importer le ViewEncapsulation module de @angular/core et, comme dans la deuxième option, désactivez l’iframe de l’éditeur.

Ensuite, au niveau du composant, vous devez définir la propriété d’encapsulation de votre composant sur ViewEncapsulation.None. Maintenant, dans votre composant styles vous pouvez définir de nouveaux styles pour les deux classes CSS que l’éditeur utilise pour formater son texte : k-editor et k-editor-content.

L’exemple suivant désactive l’encapsulation puis, dans le composant styles propriété, définit :

  • Les marges d’un paragraphe (le p élément) à 0
  • La strong élément pour mettre en évidence le texte avec un fond gris clair
@Component({
  selector: …,
  template: `
<kendo-editor
		[(value)]="notes"
[iframe]="false">
	</kendo-editor>`,
  encapsulation: ViewEncapsulation.None,
  styles: [
    `
      .k-editor .k-editor-content p {
            margin: 0;
      }
      .k-editor .k-editor-content strong {
            font-weight: normal;
            background-color: lightgray;
      }`
  ]

Bien que je me sois concentré ici uniquement sur la configuration de l’éditeur, l’éditeur est également très extensible. Parce que l’éditeur est basé sur le Bibliothèque ProseMirror, vous pouvez écrire vos propres plugins pour l’éditeur. En plus de contrôler ce qui apparaît sur la barre d’outils de l’éditeur, vous pouvez ajouter votre propre boutons personnalisés (standard, toggle, dropdown ou split) aux barres d’outils. Il existe également une API qui permet à votre code d’interagir avec l’éditeur (vous pouvez, par exemple, accéder au texte actuellement sélectionné).

C’est beaucoup d’options. Le cas le plus probable est que, prêt à l’emploi, l’interface utilisateur de Kendo pour Angular Editor sera exactement ce que vous voulez : vous allez simplement le lier à certaines données ou l’intégrer dans un formulaire et poursuivre votre vie. Cependant, si vous souhaitez personnaliser votre éditeur, vous disposez de toutes les options de personnalisation que vous souhaitez.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link