web-dev-qa-db-fra.com

Comment obtenir l'instance de l'éditeur tinyMCE par le sélecteur d'élément?

Je veux définir un contenu de l'éditeur tinyMCE après sa création avec une requête AJAX. J'ai plusieurs éditeurs à la page. Tous sont initialisés avec:

tinymce.init({
        selector: '.tiny-mce'
    });

Chaque éditeur a une classe distincte pour le séparer les uns des autres. Comment utiliser cette classe pour définir le contenu dans un éditeur particulier, après avoir obtenu des données avec une demande AJAX?

tinyMCE.get('.class_name') // returns null

Je recherche l'API et SO et je ne trouve pas de fonction pour faire une chose aussi simple.

Éditer:

J'ai trouvé un moyen pas si propre d'obtenir l'instance de l'éditeur. Lorsque tinyMCE a été créé, il a ajouté id avec le nom de l'éditeur à l'élément. Maintenant, je peux faire quelque chose comme ça:

var id = $('.class_name').attr('id');
tinyMCE.get(id).setContent('new content');

Mais y a-t-il une meilleure façon?

javascriptjquerytinymce
12
Boykodev

Selon l'API get(), la chaîne que vous passez à cet appel doit être l'ID [~ # ~] [~ # ~] de l'élément éditeur pas une classe.

https://www.tinymce.com/docs/api/class/tinymce/#get

Donc, si vous souhaitez cibler l'éditeur en fonction de l'ID, vous avez besoin de quelque chose comme ceci:

<textarea class='tiny-mce' id='editor1'></textarea>
<textarea class='tiny-mce' id='editor2'></textarea>

... et dans votre JavaScript quelque chose comme ça ...

tinymce.get('editor2').setContent('...content here...');

Si vous n'avez qu'un seul éditeur sur la page, vous pouvez également utiliser

tinymce.activeEditor.setContent('...content here...');

EDIT: Cela dépend de quand dans le cycle de vie de l'éditeur que vous souhaitez appeler les méthodes get() ou activeEditor.

Ceux-ci ne retourneront rien tant que TinyMCE n'aura pas été complètement initialisé. Si vous avez un code comme celui-ci:

<form method="post" action="dump.php">
    <textarea class='tiny-mce' id='editor1'></textarea>
    <textarea class='tiny-mce' id='editor2'></textarea>  
</form>
<script>
    tinymce.get('editor2').setContent("content here");
</script>

Cela échouera généralement parce que vous ne savez pas si TinyMCE a terminé d'initialiser les zones de texte lorsque votre JavaScript est en cours d'exécution. Veuillez voir ce violon:

http://fiddle.tinymce.com/gufaab/1

La meilleure façon de charger du contenu dans l'éditeur est d'utiliser le rappel "init" de l'éditeur et d'y placer votre code. Par exemple:

tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    setup: function (editor) {
        editor.on('init', function () {
             this.setContent('The init function knows on which editor its called - this is for ' + editor.id);
        });
    } 
});

... notez que l'init est appelé pour chaque éditeur (s'il y en a plusieurs) et que vous avez accès à l'objet éditeur dans le DOM si nécessaire.

16
Michael Fromin

Vous pouvez utiliser id dans le sélecteur et définir le contenu après l'initialisation de l'éditeur avec la fonction de rappel:

tinymce.init({
        selector: 'textarea#tinymce1',
init_instance_callback : function(){
tinymce.get('tinymce1').setContent(data)
}
});

c'est le html

<textarea id="tinymce1"></textarea>

utilisez init_instance_callback car si vous définissez le contenu avec la requête ajax, cela peut aller plus vite que l'initialisation de l'éditeur

2
Ruggero