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

Question

我已经搜索了很多，但是通过 google-fu'ing 没有得到任何结果 :(

我有一个已经初始化的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

这是我在任何时候将事件绑定到一个或多个文本区域的解决方案，因为此代码是在将 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 2

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

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

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_instance_callback，并且效果很好。

-托马斯

Answer 4

虽然这篇文章现在很旧，但我认为其他人需要这个答案。我遇到了同样的问题，为了解决这个问题，我这样做了：

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

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

Answer 5

在使用 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() 时tinymce 尚未初始化。