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.js
enregistré en tant que plugin sous le nom metricconvert
et il est situé sous le wwwroot
dossier selon la structure fournie.
Concernant le fichier JS, il comprend trois composants principaux :
- Ajout du plugin personnalisé sous forme de bouton dans l’éditeur, comme illustré par
editor.ui.registry.addButton('metricconvert', {})
. - 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" />');
. - 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)
Source link