2

TinyMCE 機能を強化するために、Wordpress 用のプラグインを作成しました。次のコードを使用して、js ファイルを管理パネルに含めます。

add_action('admin_print_scripts', 'admin_head_js');
function admin_head_js() {
    $myJSFile =  plugins_url( 'a2m_functions.js', __FILE__ ) ;
    wp_enqueue_script( 'a2m_functions_js',$myJSFile,false,'1.0');
}

TinyMCE プラグインは次のようになります。

// closure to avoid namespace collision
(function(){
    // creates the plugin
    tinymce.create('tinymce.plugins.a2m_landingpages', {
        // creates control instances based on the control's id.
        // our button's id is "mygallery_button"
        createControl : function(id, controlManager) {
            if (id == 'a2m_landingpages_button') {
                // creates the button
                var button = controlManager.createButton('a2m_landingpages_button', {
                    title : 'A2ML Landindpage', // title of the button
                    image : '../wp-includes/images/smilies/icon_mrgreen.gif',  // path to the button's image
                    onclick : function() {
                        // triggers the thickbox
                        var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
                        W = W - 80;
                        H = H - 84;
                        tb_show( 'A2M Landingpage Content', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=a2ml-form' );
                    }
                });
                return button;
            }
            return null;
        }
    });

    // registers the plugin. DON'T MISS THIS STEP!!!
    tinymce.PluginManager.add('a2m_landingpages', tinymce.plugins.a2m_landingpages);

    // executes this when the DOM is ready
    jQuery(function(){
        // creates a form to be displayed everytime the button is clicked
        // you should achieve this using AJAX instead of direct html code like this
        var form = jQuery('<div id="a2ml-form">\
                                <div class="a2ml-form-wrapper">\
                                    <div class="a2ml-form-selector a2ml-form-landingpage">Landingpage Quiz</div>\
                                    <div class="a2ml-form-selector">AR Quiz</div>\
                                <\div>\
                            </div>');

        var table = form.find('table');
        form.appendTo('body').hide();

        // handles the click event of the submit button
        form.find('#a2m-submit').click(function(){
            // defines the options and their default values
            // again, this is not the most elegant way to do this
            // but well, this gets the job done nonetheless
            var shortcode = '<table><tr><td>';
            shortcode += table.find('#a2ml-question').val();
            shortcode += '</td></tr></table>';

            // inserts the shortcode into the active editor
            tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

            // closes Thickbox
            tb_remove();
        });
    });
})()

含まれている a2m_functions.js は次のようになります。

jQuery(document).ready(function(){

    jQuery('.a2ml-form-wrapper').on('click', '.a2ml-form-selector', function() {
        alert("Yes");

    });
});

しかし、クリックしてもアラートは表示されません。JQuery セレクターは Wordpress の TinyMCE プラグインとどのように連携しますか?

4

2 に答える 2

2

あなたの問題が特に TinyMCE に関するものだとは思いません。

スクリプトで選択しているhtml 要素.a2ml-form-wrapperは、スクリプトがロードされた時点ではまだ存在していない可能性があります。これは、独自のスクリプトの後に TinyMCE スクリプトが読み込まれた場合、またはその html 要素が少し遅れてページに追加された場合に当てはまります。

私の仮定が当てはまる場合、解決策は、TinyMCE の後にスクリプトが読み込まれるようにするか、.live()代わりに を使用.on()してクリックをリッスンすることです。スクリプトを作成した後にクリックした要素が読み込まれた場合でも、コールバックがトリガーされます。

$(document).ready(function() {
    $('.a2ml-form-wrapper').live('click', function() {
        alert('Hello World');
    });
});

これで問題が解決しない場合は、TinyMCE html 構造とスクリプト全体を知っておくと役立つ場合があります。

于 2013-02-22T16:16:45.010 に答える
0

sharethisが述べていることは部分的に正しいです。 $('.a2ml-form-wrapper')要素は実行時点で存在しないため、何も返されません。ただし$(document).ready、ここでは役に立ちませreadyん。ドキュメントの準備ができたときに起動されるためです。エディタではありません。Tinymceエディタは通常、完全に初期化されるまでに少し時間がかかります。

ここで行う必要があるのは、エディターの準備ができたときにハンドラーを割り当てることです。解決策は次のとおりです。

独自のプラグインでcreateControlの直後に次のコードを追加します

createControl : function(id, controlManager) {
    ....
},
init : function(ed, url) {
    ed.onInit.add(function(ed) {
        jQuery('.a2ml-form-wrapper').on('click', '.a2ml-form-selector', function() {
            alert("Yes");
        });
    )};
},
于 2013-02-22T17:01:40.517 に答える