Dev Faq
0
votes

Insérer du texte au curseur en utilisant TinyMCE et angular

Utilisation de TinyMCE avec angulaire, j'ai besoin d'insérer du texte à la position du curseur, de préférence avec un bouton de barre d'outils.

Si je comprends, j'aurai besoin d'utiliser l'événement OneXecCommand avec MCEINSERTContent commande.

J'ai examiné les éléments suivants:

0 commentaires

4 Réponses :

1
votes

On dirait que vous reliez des exemples pour une bibliothèque différente. Donc, ceux-ci ne travailleraient pas. Y a-t-il une raison pour laquelle vous avez choisi d'utiliser la bibliothèque TinyMCE au lieu de https://www.npmjs.com / Emballage / Angular2-TinyMCE ?

J'ai examiné le code source et je n'ai pas trouvé de moyen facile de cibler l'instance TinyMCE via ViewChild, ce qui est possible avec l'autre bibliothèque.

2 commentaires

Je n'ai pas choisi la bibliothèque, quelqu'un d'autre a fait :-), mais je présume parce que celui que nous utilisons est le "officiel". Je vais regarder dans l'autre entre-temps. Merci

Bonne chance! @Wayne :)

3
votes

La documentation que vous avez référencée est de savoir comment obtenir TinyMCE intégré dans une application angulaire. Ce que je crois que vous voulez faire est:

  1. Ajoutez un bouton de la barre d'outils à la barre d'outils
  2. En cliquant sur le bouton de la barre d'outils Insère le contenu de l'emplacement actuel du curseur

    Fondamentalement le fait que vous utilisiez angulaire n'est pas important pour l'un ou l'autre de ces objectifs, vous ne verrez rien de manière angulaire spécifique dans les détails suivants.

    Ajout d'une barre d'outils

    Ceci est fait (à TinyMCE 5) via le Tinymce.editor.ui.registry.aDdbutton () API. Ceci est documenté ici: HTTPS: //www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addbutton

    Insertion de contenu au curseur

    Ceci est fait (en TinyMCE 5) via le TinyMce.editor.inssertContent () API. Ceci est documenté ici: https://www.tiny.cloud/ DOCS / API / TINYMCE / TINYMCE.Editor / # insertContent

    Le moyen le plus simple de faire tout cela est d'utiliser votre configuration TinyMCE via la fonction de configuration . Vous pouvez ajouter le bouton et déterminer les actions (via JavaScript) qu'il faudra lorsqu'elle sera cliquée sur un seul endroit.

    Voici un exemple: http://fiddle.tinyond.com/fhgaab

2 commentaires

Merci Michael, je pense que je peux travailler avec cela. Je passerai à TinyMCE 5 lorsque je suis de retour au clavier et que vous vous tiendrez au courant.

Pour l'exemple angulaire, voir mon Réponse

0
votes

La réponse de Michael est correcte, car il n'est pas important que j'utilise angulaire.

mais je pensait que cela mériterait de partager la mise en œuvre angulaire pour la référence future.

TL; DR: Voici un exemple Stackblitz - angulaire TinyMCE Insérer le texte au curseur

Le processus inclus:

  • Mise à niveau vers les dernières versions (actuellement) Dernières versions de TinyMCE et TinyMCE Angular:

    • NPM Installez TinyMce@5.0.4
    • NPM Installez @ TinyMCE / TinyMCE-angular @ 3.0.1

    • Importation EdidorModule : XXX

    • initialise l'éditeur dans le composant (remarque la fonction de configuration pour ce cas): XXX

    • Le HTML est simplement: XXX

0 commentaires
0
votes

Pour quiconque en regardant cela récemment (mars 2021), c'est comment envoyer des commandes à minuscules mce en angular 11: xxx

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO