TinyMCE: как привязать событие после его инициализации

Я уже много искал, но по 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 уже инициализирован?

7
callback events handler javascript tinymce

5 ответов

после взлома объекта tinymce с помощью консоли.log (), я нашел рабочее решение:

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 еще не был инициализирован.

9

хотя этот пост старый, но я думаю, что другим людям понадобится этот ответ. У меня была такая же проблема и исправить это, я сделал это:

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

на основе http://www.tinymce.com/wiki.php/Configuration3x:init_instance_callback

8

EDIT: oops - я думал, что это еще один вопрос, на который я смотрел, который был специфичен для WordPress + TinyMCE, думаю, нет. Хотя я оставлю ответ здесь, поскольку он может быть полезен другим.

правильный способ сделать это-добавить в TinyMCE init с фильтром WordPress. Например:

PHP (в функции.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 и он отлично работает.

-Томас

3

вот мое решение для привязки событий к одному или нескольким текстовым областям в любое время, учитывая, что этот код добавляется после включения файла javascript tinymce в вашу страницу. (Другими словами, единственное, что требуется для этого, - это существование переменной '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
    });
}

обратите внимание, что событие "change"не обязательно всегда срабатывает сразу после изменения. согласно документации, его "увольняют при изменении внутри редактор, вызывающий добавление уровня отмены.- Что, по моему опыту, не всегда случается, когда ты этого ожидаешь.

один из способов преодолеть это-привязка нескольких событий, таких как "изменение ввода", однако, будет некоторое перекрытие, которое затем должно быть отфильтровано.

3

в TinyMCE 4 onChange не существует. Вы должны использовать:

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