2017-08-28 1 views
0

J'utilise la fonction wp_editor de WordPress pour installer une instance TinyMCE. Je veux ajouter quelques fonctionnalités supplémentaires à TinyMCE en utilisant certaines fonctions de jQuery, mais il semble que je me limite à utiliser des fonctions TinyMCE pour des choses telles que focus, change et blur. Lorsque je configure TinyMCE de cette façon, je suis fondamentalement obligé d'utiliser la propriété init_instance_callback.Comment puis-je référencer des fonctions dans TinyMCE 'init_instance_callback'?

PHP

$default_settings = array( 
    'media_buttons' => false, 
    'quicktags' => false, 

    'tinymce' => array(
     'init_instance_callback' => 'function(editor) { // Forced to use JS in PHP... 
       editor.on("focus", function(ed) { 
        tinyMCEFocus(ed); 
       }); 
      }' 
    ) 
); 

J'ai un fichier différent où je veux gérer TinyMCE JavaScript, comme je ne veux pas écrire tout mon JavaScript dans le fichier PHP où j'appelle wp_editor().

Dans mon editor.on("focus", function(ed) { J'ai placé une fonction qui se trouve dans mon fichier JS externe, dans lequel j'ai également défini jQuery.

JS

(function($) { 

    var tinyMCEFocus = function(ed) {   
     console.log('Do stuff with jQuery if this works'); 
    } 

})(jQuery); 

Mais en quelque sorte, lors de l'appel de cette fonction, il ne fonctionne tout simplement pas et me donne une erreur:

(index):401 Uncaught ReferenceError: tinyMCEFocus is not defined

Honnêtement, en utilisant jusqu'à TinyMCE pour des trucs sur mesure a été un distaster, mais peut-être que je fais quelque chose de mal? Y a-t-il une meilleure façon de gérer ce genre de chose? Et sinon, pourquoi ma fonction ne fonctionne-t-elle pas?

Répondre

0

Encore une fois, répondre à ma propre question quelques minutes après l'avoir posté.

J'ai découvert que vous deviez donner à la fonction une portée "globale" en l'affectant à la fenêtre. Cela m'a également permis de passer simplement une fonction à init_instance_callback.

'tinymce' => array(
    'init_instance_callback' => 'customTinyMCEFunctions' 
) 

Et en JavaScript.

(function($) { 
    window.customTinyMCEFunctions= function(editor) { 
     // Do stuff 
    } 
})(jQuery);