使用Fetch API加载含Quill富文本编辑器的ASP.NET MVC分部视图时Quill无法渲染

我之前也碰到过一模一样的问题！其实问题出在Fetch API和jQuery load() 方法处理加载后HTML的逻辑差异上：jQuery的load()在把HTML插入DOM后，会自动识别并执行里面的<script>标签代码；但你用Fetch拿到HTML文本直接塞给innerHTML时，浏览器只会把DOM元素插进去，不会自动执行其中的脚本——而你的Quill编辑器初始化代码刚好就在分部视图的脚本里，自然就没跑起来。

给你两个实用的解决方案：

方案一：手动执行分部视图中的脚本 #

修改你的loadPartialView函数，在插入HTML后，手动提取并执行容器内的所有脚本代码：

async function loadPartialView(url, container) {
    try {
        const response = await fetch(url);
        const html = await response.text();
        const targetContainer = document.getElementById(container);
        // 把HTML插入目标容器
        targetContainer.innerHTML = html;
        
        // 遍历容器内的所有script标签，手动执行
        const scripts = targetContainer.querySelectorAll('script');
        scripts.forEach(oldScript => {
            const newScript = document.createElement('script');
            // 处理内联脚本内容
            if (oldScript.textContent) {
                newScript.textContent = oldScript.textContent;
            }
            // 处理外部脚本（如果分部视图里有引入外部脚本的话）
            if (oldScript.src) {
                newScript.src = oldScript.src;
            }
            // 复制原脚本的其他属性，比如type、async等
            oldScript.attributes.forEach(attr => {
                newScript.setAttribute(attr.name, attr.value);
            });
            // 替换原脚本标签，触发执行
            oldScript.parentNode.replaceChild(newScript, oldScript);
        });
    } catch (error) {
        console.error('Error fetching PartialView:', error);
    }
}

方案二：抽离Quill初始化逻辑，手动调用 #

如果你的分部视图里的Quill初始化是类似new Quill('#editorId', { ... })这样的代码，更推荐把初始化逻辑抽成独立函数，在Fetch插入HTML后手动调用，这样更利于维护：

首先在全局（或者你的脚本模块中）定义初始化函数：

function initQuillEditors() {
    // 假设你的Quill容器都带有统一的类名，比如.quill-editor
    document.querySelectorAll('.quill-editor').forEach(container => {
        // 给已初始化的容器打标记，避免重复初始化
        if (!container.classList.contains('quill-initiated')) {
            new Quill(container, {
                theme: 'snow',
                // 这里放你的Quill配置项，比如工具栏、占位符等
            });
            container.classList.add('quill-initiated');
        }
    });
}

然后修改你的loadPartialView函数，在插入HTML后调用这个初始化函数：

async function loadPartialView(url, container) {
    try {
        const response = await fetch(url);
        const html = await response.text();
        const targetContainer = document.getElementById(container);
        targetContainer.innerHTML = html;
        
        // 手动触发Quill初始化
        initQuillEditors();
    } catch (error) {
        console.error('Error fetching PartialView:', error);
    }
}

另外要注意：如果你的Quill核心库是通过分部视图引入的，最好把它移到主页面里提前加载好，不然即使执行脚本，也会因为找不到Quill对象而报错。

备注：内容来源于stack exchange，提问作者Momenee