Ajout d’un plugin externe personnalisé à TinyMce / Blogs / Perficient

Nous avons récemment terminé un projet de mise à niveau et l’un des changements notables que nous avons apportés a été l’intégration de TinyMCE dans son propre package NuGet. Avec la dernière version, plusieurs ajustements ont été apportés au processus de mise en œuvre.

Lors de la mise à niveau, nous avons également dû déplacer un plugin personnalisé au sein de l’éditeur. Depuis que j’ai fait référence à diverses sources en ligne pour exécuter cela, j’ai documenté le processus ci-dessous. La mise en œuvre implique deux étapes clés :

Étape 1 : Configuration de TinyMCE dans Startup.cs dans la méthode ConfigureServices.

Étape 2 : Implémentation du côté interface utilisateur du plugin.

Pour commencer, comme le montre l’image ci-dessus, vous devez enregistrer le fichier JavaScript en tant que plugin externe et vous assurer qu’il est accessible via le chemin spécifié dans le fichier. AddExternalPlugin méthode. Dans ce cas, nous avons un fichier JS appelé metricconversion.jsenregistré en tant que plugin sous le nom metricconvertet il est situé sous le wwwroot dossier selon la structure fournie.

Concernant le fichier JS, il comprend trois composants principaux :

1. Ajout du plugin personnalisé sous forme de bouton dans l’éditeur, comme illustré par editor.ui.registry.addButton('metricconvert', {}).
2. Ajout d’une icône au bouton. Vous pouvez choisir parmi une gamme d’icônes prédéfinies ou incorporer une icône personnalisée. Pour ce projet, j’ai utilisé une image personnalisée comme icône. Alors que la documentation suggère de créer ou d’écraser un pack d’icônes pour implémenter une icône personnalisée (reportez-vous à : https://www.tiny.cloud/docs/tinymce/6/creating-an-icon-pack/), j’ai découvert que la méthode décrite ci-dessous fonctionne également si vous souhaitez simplement ajouter une seule icône autre qu’un SVG. Par exemple: editor.ui.registry.addIcon('metric', '<img src="https://blogs.perficient.com/ClientResources/TinyMce/MetricConversion/images/metric.png" />');.
3. Intégrer la logique nécessaire au sein du onAction méthode.

Le résultat final implique :

• Un bouton personnalisé sur l’éditeur accompagné d’une icône.

• Un exemple de message d’erreur de validation affiché lors d’un clic sur le bouton, si aucune valeur n’est sélectionnée.

• Entrez une métrique et cliquez sur le bouton pour imprimer la valeur convertie (par exemple, convertir 15 pieds en mètres)