protyle加载完成执行

注意是页面加载完成后触发

这种方式比较适合修改编辑器的内容时使用，如果新增导航按钮等，可能由于加载较慢出现闪烁，这种场景推荐使用 protyle加载时执行

// 监听protyle加载完成，注意这个是开始加载完成时，不是加载时
// 调用示例 observeProtyleLoaded((protyle)=>console.log(protyle))
function observeProtyleLoaded(callback, parentElement) {
    if(typeof parentElement === 'string') parentElement = document.querySelector(parentElement);
    // 创建一个 MutationObserver 实例
    const observer = new MutationObserver((mutationsList) => {
        mutationsList.forEach((mutation) => {
            if (mutation.type === 'attributes' && mutation.attributeName === 'data-loading') {
                const targetElement = mutation.target; // 发生变化的目标元素
                // 判断目标元素是否匹配指定选择器
                if (targetElement.matches('.protyle')) {
                    const dataLoadingValue = targetElement.getAttribute('data-loading');
                    // 如果 data-loading 的值为 "finished"，触发回调
                    if (dataLoadingValue === 'finished') {
                        callback(targetElement);
                    }
                }
            }
        });
    });
    // 配置观察选项
    const config = {
        attributes: true, // 监听属性变化
        attributeFilter: ['data-loading'], // 仅监听 data-loading 属性
        subtree: true, // 监听父容器及其所有后代元素
    };
    // 启动观察
    observer.observe(parentElement||document.body, config);
}

相关 protyle加载时执行