Tinymce 节点内容已更改

Question

我试图在每次更改节点时触发一个事件。

基本上我需要在空行（节点）不再为空时触发它。

在文档中我发现只有更改方法，但不会每次都立即触发。

还有其他我可以听的活动吗？

Answer 1

您可以在 tinymce 编辑器 dom 上分配突变观察者并监听变化。使用 tinymce 配置参数 setup 并添加一个 init 处理程序以从一开始就观察 dom：

setup : function(ed) {

    ed.on('init', function(e){
        // MutationObserver
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
        if (typeof MutationObserver != 'undefined')
        {   
            // select the target node
            var targets = ed.getDoc().querySelector('body');

            // create an observer instance
            var observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    // do your magic here!!!
                });    
            });

            // configuration of the observer:
            var config = { attributes: true, childList: true, characterData: true }

            // pass in the target node, as well as the observer options
            observer.observe(targets, config);
        }
        // fallback for older browsers
        else
        {
            $(ed.getBody()).bind('DOMNodeChanged', function(e) {
               // do your magic here !
            });
        }
    });
}

您可能需要根据需要配置观察者。 这是一个关于突变观察者的有用页面：https://addyosmani.com/blog/mutation-observers/。 不要使用突变事件，因为它们已被弃用。

您可以使用突变事件作为不支持观察者的浏览器的后备（参见上面的代码）。