Tinymce节点内容发生了变化

时间:2016-01-05 14:49:42

标签: javascript events tinymce rte mutation-observers

我每次尝试更改节点时都尝试触发事件。

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

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

我还能收听其他活动吗?

1 个答案:

答案 0 :(得分:0)

你可以在tinymce编辑器上为变异观察者提供帮助,并听取变化。使用tinymce配置参数设置并添加一个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/。 不要使用变异事件,因为它们已被弃用。

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