编辑器被加载完毕或内容被修改事件

2025-04-01 | 0 浏览 | 0 评论

编辑器被加载完毕或内容被修改事件

(async () => {
    observeEditorLoaded((editor)=>{
        console.log(editor, 'editor loaded');
    });
  
    // 监听编辑器被添加
    let loading = false;
    function observeEditorLoaded(callback) {
        // 创建一个观察者实例并传入回调函数
        const observer = new MutationObserver((mutationsList, observer) => {
            for (const mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    if (mutation.target.classList?.contains("protyle-wysiwyg")) {
                        // 防止死循环
                        if(loading) return;
                        loading = true;
                        setTimeout(()=>{loading = false;}, 1000);
                        //回调
                        callback(mutation.target);
                    }
                }
            }
        });
        // 配置观察选项:
        const config = { 
            childList: true, // 观察子节点的变化(添加/删除)
            subtree: true, // 观察所有后代节点
            attributes: false,
        };
        // 选择需要观察变动的节点
        const targetNode = document.body; // 或者选择更具体的父节点以减少性能消耗
        // 开始观察目标节点
        observer.observe(targetNode, config);
        // 返回一个取消观察的方法
        return () => observer.disconnect();
    }
})();

下面该代码已废弃

(()=>{
    whenElementExist('.layout__center').then(async element => {
        // 等待笔记列表加载完毕
        await sleep(40);
        // 监听编辑器加载事件
        observeDomChange(element, async (mutation) => {
            if (mutation.target.classList?.contains("protyle-wysiwyg")) {
               const editor = mutation.target;
                if(editor && editor.closest){
                    // 等待编辑器加载完毕
                    const protyle = editor.closest(".protyle");
                    if(protyle.dataset.loading !== 'finished'){
                        await whenElementExist(()=>editor?.closest(".protyle") === 'finished');
                    }
                    // 编辑器加载完毕(包括编辑器内容被修改)
                    console.log('editor loaded');
                    // TODO 这里写你要进行的操作
                  
                }
            }
        });
    });
    // 观察元素被添加
    function observeDomChange(selector, callback) {
        // 定义一个回调函数，当DOM发生变化时调用
        const onChange = function(mutationsList, observer) {
            for (const mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    callback(mutation);
                }
            }
        };
        // 创建一个观察器实例，并传入回调函数
        const observer = new MutationObserver(onChange);
        // 配置观察选项：指定需要观察哪些变动
        const config = { attributes: false, childList: true, subtree: true };
        // 获取目标节点
        const targetNode = typeof selector === 'string' ? document.querySelector(selector) : selector;
        // 如果目标节点存在，则开始观察
        if (targetNode) {
            observer.observe(targetNode, config);
        }
        // 返回一个函数，用于停止观察
        return () => {
            observer.disconnect();
        };
    }
    // 延迟执行
    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    // 等待元素渲染完成后执行
    function whenElementExist(selector) {
        return new Promise(resolve => {
            const checkForElement = () => {
                let element = null;
                if (typeof selector === 'function') {
                    element = selector();
                } else {
                    element = document.querySelector(selector);
                }
                if (element) {
                    resolve(element);
                } else {
                    requestAnimationFrame(checkForElement);
                }
            };
            checkForElement();
        });
    }
})();

‍

笔记