javascript - Wordpress & Gutenberg 如何在以编程方式更改输入或文本区域值时激活更新按钮

Question

我目前正在测试新的 Gutenberg UI，我对一些旧代码有一些问题。

我想在 metabox 中以编程方式更改 metabox 值时激活更新按钮(在我的例子中是一个 tinymce 编辑器，但我在隐藏输入时遇到了同样的问题)

// here is the part of code for the tynimce editor 
tc.setup = function (ed) {
      ed.on('blur', function (e) {
          // generate data when cursor move out
          ed.save();
          console.log('i want to change update button state :\')');            
          // this not work...  
          // $('#my-hidden-input-or-textarea')
          // .val(new Date().getMilliseconds())
          // .trigger("change")
          // .trigger('click');
      });
};
tinymce.init(tc);

Answer 1

jQuery 不会触发真正的 DOM 事件，而是尝试在它自己的内部事件映射中寻找回调 https://github.com/facebook/react/issues/3249#issuecomment-77814784

另请参阅:https://github.com/WordPress/gutenberg/issues/3975

所以灵魂是通过 vanilla Javascript 触发事件，例如:

<script type="text/javascript">
// listen on metaboxes form 
jQuery(document).on('input-dirty', '.editor-meta-boxes-area form', function () {
    var $ = jQuery;
    var element = $(this)[0];
    if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("change", false, true);
        element.dispatchEvent(evt);
    } else {
        element.fireEvent("onchange");
    }
});

// trigger event programmatically changed element
$('.your-input').closest('form').trigger('input-dirty');
</script>

对于tinymce编辑器:

<?php
// or for custom tinymce editor 
$options['tinymce']['setup'] = "function (ed) {
        ed.on('blur', function (e) { // generate the content and set textarea on blur          
                                    ed.save();                                        
                                    // fix for gutenberg editor, trigger change on programmatically changed input
                                    $(ed.getElement()).closest('form').trigger('input-dirty');
                                });
                            }";
$options = array_merge(array('media_buttons' => true, 'textarea_rows' => 16, 'teeny' => true, 'quicktags' => true, 'textarea_name' => $id), $options);
wp_editor($input_text_content, $id . '_' . rand(100, 9999), $options);
?>