11

我已经搜索了很多，但是通过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 事件？

4

5 回答 5

15

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

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

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

于 2014-01-20T16:11:01.450 回答
12

在使用 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调用是为了克服 and 的竞争条件tinymce，jQuery因为当调用到时tinymce.editors[i].onChange.add()tinymce 尚未初始化。

于 2013-08-29T16:22:06.930 回答
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并且效果很好。

-托马斯

于 2014-07-30T18:50:08.880 回答
3

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

请注意，“更改”事件不一定总是在发生更改后立即触发。根据文档，它“在编辑器中进行更改导致添加撤消级别时被触发。” 以我的经验，这并不总是在您期望它发生时发生。

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

于 2017-03-13T14:06:02.380 回答
2

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

tinymce.get('myeditorname').on("change", function() { alert("stuff"); });
于 2016-10-12T17:30:26.970 回答