Question

我已经搜索了很多但是通过 google-fu ，我不会得到任何结果：（

我有一个已初始化的tinyMCE编辑器，我无法控制初始化过程，因此以下代码根本不起作用：

tinyMCE.init({
   ...
   setup : function(ed) {
          ed.onChange.add(function(ed, l) {
                  console.debug('Editor contents was modified. Contents: ' + l.content);
          });
   }
});

由于未定义jQuery tinymce插件，因此以下代码无效：

$('textarea').tinymce({
    setup: function(ed) {
        ed.onClick.add(function(ed, e) {
            alert('Editor was clicked: ' + e.target.nodeName);
        });
    }
});

我的意思是，它必须使用tinymce.something语法。

如何在tinyMCE初始化之后将回调函数绑定到任何tinyMCE事件？

Answer 1

在使用console.log（）攻击tinymce对象后，我找到了一个可行的解决方案：

setTimeout(function () {
       for (var i = 0; i < tinymce.editors.length; i++) {
             tinymce.editors[i].onChange.add(function (ed, e) {
             // Update HTML view textarea (that is the one used to send the data to server).
         ed.save();
       });
            }
}, 1000);

在回调函数中，可以设置任何想要的事件绑定。

setTimeout调用是为了克服tinymce和jQuery的竞争条件，因为当tinymce.editors[i].onChange.add()的调用被确定时，尚未初始化。

Answer 2

虽然这篇文章现在已经过时了，但我认为其他人会需要这个答案。我有同样的问题并解决它我做了这个：

tinyMCE.init({
        ...
        init_instance_callback : "myCustomInitInstance"
});

基于http://www.tinymce.com/wiki.php/Configuration3x:init_instance_callback

Answer 3

编辑：哎呀 - 我认为这是我看到的另一个问题，特别是WordPress + TinyMCE，猜不是。虽然我会在这里留下答案，因为它可能对其他人有所帮助。

执行此操作的正确方法是使用WordPress过滤器附加到tinyMCE init。例如：

PHP（在functions.php或在编辑页面加载时运行的其他位置）：

  add_action( 'init', 'register_scripts' );     
  function register_scripts(){
    if ( is_admin() ) {
      wp_register_script(
        'admin-script',
        get_stylesheet_directory_uri() . "/js/admin/admin.js",
        array('jquery'),
        false,
        true
      );
    }
  }

  add_action( 'admin_enqueue_scripts', 'print_admin_scripts' );
  function print_admin_scripts() {        
    wp_enqueue_script('admin-script');
  }

  add_filter( 'tiny_mce_before_init', 'my_tinymce_setup_function' );
  function my_tinymce_setup_function( $initArray ) {
    $initArray['setup'] = 'function(ed){
      ed.onChange.add(function(ed, l) {
        tinyOnChange(ed,l);
      });
    }';
    return $initArray;
  }

JavaScript（/js/admin/admin.js）

  (function($){
    window.tinyOnChange = function(ed, l){        
      console.log('Editor contents was modified. Contents: ' + l.content);      
    }
  }(jQuery);

这是在WordPress 3.9中测试和使用的（虽然我只是得到控制台输出：

Deprecated TinyMCE API call: <target>.onChange.add(..)

但是由于tinyMCE弃用了您尝试使用的代码。这个方法仍然可以修改为任何tinyMCE init选项 - 我目前正在使用它init_instance_callback并且它工作得很好。

-Thomas

Answer 4

这是我在任何时候将事件绑定到一个或多个textareas的解决方案，因为这个代码是在将tinymce javascript文件包含到您的页面后附加的。（换句话说，唯一需要工作的是'tinymce'变量的存在）

// Loop already initialised editors
for(id in tinymce.editors){
    if(id.trim()){
        elementReady(id);
    }
}

// Wait for non-initialised editors to initialise
tinymce.on('AddEditor', function (e) {
    elementReady(e.editor.id);
});

// function to call when tinymce-editor has initialised
function elementReady(editor_id){

    // get tinymce editor based on instance-id
    var _editor = tinymce.editors[editor_id];

    // bind the following event(s)
    _editor.on("change", function(e){

        // execute code
    });
}

请注意，“更改”事件并不一定会在更改后立即触发。 According to the documentation，当在编辑器中进行更改以导致添加撤消级别时，它会被触发。“根据我的经验，并不总是会发生在您预期会发生的情况。

克服这个问题的一种方法是绑定多个事件，例如“输入更改”，然而，会有一些重叠，然后应该过滤。

Answer 5

在TinyMCE 4中，onChange不存在。你必须使用：

tinymce.get('myeditorname').on("change", function() { alert("stuff"); });

TinyMCE：初始化后如何绑定事件

5 个答案: