Tinymce编辑器中的Keyup事件不起作用

我正在尝试开发一个插件，显示在页面/后期编辑页面上。我需要做的是检测内容区域何时更改。无论是在视觉模式下，还是在文本模式下。我想使用keyup事件。因此，当用户键入时，我可以提供我的结果。

但使用tinymce编辑器，我似乎无法正确检测内容区域中的更改。如果页面以文本模式加载，我一度能够检测到更改。但我们需要它在视觉模式下工作。当keyup事件发生时，我想将主体的全部内容复制到JS变量中。一旦我做到了，我就可以从那里开始了。

如果不破解core和调整tinymce init（）方法，我似乎无法理解如何实现这一点。这不是我想做的。

非常感谢。

编辑：答案

好的，我标出了正确的答案。但我想声明，在我的例子中，我需要以“文本”模式加载此代码，这意味着所包含的javascript文件根本没有加载。因此，我将js加载到页面上插件区域的脚本标记中，效果很好。我仍然需要做插件初始化的工作，但除非有办法，否则它会加载一个空的js文件。以下是我的javascript中的内容：

jQuery(document).ready(function($) {
    // Create \'keyup_event\' tinymce plugin
    tinymce.PluginManager.add(\'keyup_event\', function(editor, url) {

        // Create keyup event
        editor.on(\'keyup\', function(e) {
            do_stuff_here();
        });
    });

    $(\'#content\').on(\'keyup\', function(e) {
        do_stuff_here();
    });

    // This function allows the script to run from both locations (visual and text)
    function do_stuff_here(content) {

        // test if the editor is available
        if (tinymce && null == tinymce.activeEditor)
        {
            console.log(\'tinymce not loaded (text mode)\');
            // exit if the editor is not ready yet
            //return
            var data = $(\'#content-textarea-clone\').text();
        }
        else
        {
            // visual mode
            data = $(tinymce.activeEditor.getContent()).text();
        }

        // rest of my processing
    }
});

这样做很有魅力。

function tinymce_init() { // Hook to tinymce plugins filter add_filter( \'mce_external_plugins\', \'tinymce_plugin\' ); } add_filter(\'init\', \'tinymce_init\'); function tinymce_plugin($init) { // We create a new plugin... linked to a js file. // Mine was created from a plugin... but you can change this to link to a file in your plugin $init[\'keyup_event\'] = plugins_url() . \'/test/keyup_event.js\'; return $init; }

jQuery(document).ready(function($) { // Create \'keyup_event\' tinymce plugin tinymce.PluginManager.add(\'keyup_event\', function(editor, url) { // Create keyup event editor.on(\'keyup\', function(e) { // Get the editor content (html) get_ed_content = tinymce.activeEditor.getContent(); // Do stuff here... (run do_stuff_here() function) do_stuff_here(get_ed_content); }); }); // This is needed for running the keyup event in the text (HTML) view of the editor $(\'#content\').on(\'keyup\', function(e) { // Get the editor content (html) get_ed_content = tinymce.activeEditor.getContent(); // Do stuff here... (run do_stuff_here() function) do_stuff_here(get_ed_content); }); // This function allows the script to run from both locations (visual and text) function do_stuff_here(content) { // Now, you can further process the data in a single function alert(content); } });

为什么当我尝试添加TinyMCE按钮时，我的可视POST编辑器会断开？

我正在尝试向TinyMCE编辑器添加一个按钮。我正在使用WordPress 3.9.1，所以我关注this tutorial 添加新的TinyMCE按钮。现在，我只是想让教程版本正常工作——完成后，我将编辑按钮的脚本，以实际执行我想要的操作。我已将此添加到我的孩子主题中functions.php 文件：// Hooks your functions into the correct filters function my_add_mce_button() { // check us

相关推荐

为什么当我尝试添加TinyMCE按钮时，我的可视POST编辑器会断开？