如何通過在tinymce編輯器中創建切換按鈕來添加onclick事件？

我想在wordpress中添加一個按鈕給TinyMCE編輯器。這裏登記註冊按鈕，WordPress的是wordks精代碼：如何通過在tinymce編輯器中創建切換按鈕來添加onclick事件？

add_action('init', 'wptuts_buttons'); 
function wptuts_buttons() { 
    add_filter("mce_external_plugins", "wptuts_add_buttons"); 
    add_filter('mce_buttons', 'wptuts_register_buttons'); 
} 
function wptuts_add_buttons($plugin_array) { 
    $plugin_array['wptuts'] = get_template_directory_uri() . '/js/webramz-tinymce-toggle.js'; 
    return $plugin_array; 
} 
function wptuts_register_buttons($buttons) { 
    array_push($buttons, 'mybutton'); // dropcap', 'recentposts 
    return $buttons; 
}

這裏的JS插件代碼添加按鈕，它的命令：

(function() { 
    tinymce.create('tinymce.plugins.Wptuts', { 
     init : function(ed, url) { 
      ed.addButton('mybutton', { 
       text: "rtl-ltr", 
       cmd : 'mybuttoncmd', 
      }); 
      ed.addCommand('mybuttoncmd', function() { 
       //function() { 
        $(".wp-editor-area").addClass("ltr"); 
       //} 
      }); 
     }, 
     // ... Hidden code 
    }); 
    // Register plugin 
    tinymce.PluginManager.add('wptuts', tinymce.plugins.Wptuts); 
})();

按鈕出現，但在控制檯這個錯誤點擊時：

TypeError: $ is not a function

我的錯是什麼？實際上我想添加一個切換按鈕來在「文本模式」中添加和刪除「ltr」類到「textarea」。有幫助嗎？謝謝。

來源

2017-06-19 Mohammad J

已包含了jQuery庫的引用？ – mjw

我不確定你的問題是否可以解答 –

請看下面的Michael的回答。 – mjw

雖然WordPress加載jQuery，但它的加載方式與在常規應用程序中加載jQuery的方式稍有不同 - 它使用「兼容模式」。

它的功能之一是沒有定義$，但是定義了jQuery。所以當你使用$試圖運行jQuery時，它沒有定義。如果你改變使用jQuery：

jQuery(".wp-editor-area").addClass("ltr");

......我懷疑事情會開始爲你工作。

對於一個很好的解釋，你可以看到這篇文章：https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

來源

2017-06-19 16:12:03

非常感謝！它像魅力一樣工作。 –

你有什麼想法：如何將文本模式中的按鈕添加到編輯器而不是wordpress中的可視模式？ –

文本模式根本不使用TinyMCE，所以我無法幫助您處理該部分。 –

如何通過在tinymce編輯器中創建切換按鈕來添加onclick事件？

回答

相關問題