黄兵的个人博客

quill Invalid Quill container #kt_inbox_reply_editor

最近在使用 Quill 编辑器，在使用的过程中遇到一些问题，对于存在的问题做一个总结，方便大家排错。

quill Invalid Quill container #kt_inbox_reply_editor

出现问题的原因：

这个错误通常出现在 Quill 初始化时无法找到对应的容器。可能的原因是：

1. 容器的 ID 不正确，或者容器没有被正确地创建和添加到页面中。
2. Quill 初始化代码在容器被创建之前执行了。

可以检查一下以下几点：

1. 确认容器的 ID 是否与 Quill 初始化代码中指定的一致。
2. 确认容器是否被正确创建并添加到页面中。可以使用浏览器的开发者工具查看 DOM 结构确认。
3. 确认 Quill 初始化代码是否在容器被创建后执行。

如果以上步骤都确认无误，还是出现该错误，可以尝试在初始化代码中添加一些延时，等待容器完全加载再进行初始化。例如：

setTimeout(function() {
  var quill = new Quill('#kt_inbox_reply_editor', {
    // Quill 配置项
  });
}, 1000);

虽然上面是一种解决方案，但是如果页面上本来就不存在 id 为 kt_inbox_reply_editor 的元素，不论等多久，最终还是会出现错误的。

下面是出现错误的示例代码：

const Delta = Quill.import('delta');

const quill = new Quill('#kt_inbox_reply_editor', {
    modules: {
        toolbar: [[{header: [1, 2, false]}], ['bold', 'italic', 'underline'], ['code-block']],
    },
    placeholder: '  请输入工单回复内容...',
    theme: 'snow' // or 'bubble'
});

解决方案：

我们首先判断页面是否存在 id 为 kt_inbox_reply_editor 的元素，下面是示例代码：

function loadQuill() {
    if (document.getElementById('kt_inbox_reply_editor') !== null) {
        // 元素存在
        replyTickerQuillRender()
    }
}

function replyTickerQuillRender() {
    const Delta = Quill.import('delta');

    const quill = new Quill('#kt_inbox_reply_editor', {
        modules: {
            toolbar: [[{header: [1, 2, false]}], ['bold', 'italic', 'underline'], ['code-block']],
        },
        placeholder: '  请输入工单回复内容...',
        theme: 'snow' // or 'bubble'
    });
    ...

上面代码，我们首先使用 document.getElementById() 方法来获取指定 id 的元素，如果该元素不存在，方法会返回 null。因此，使用如下代码来判断页面是否存在 id 为 kt_inbox_reply_editor 的元素：

if (document.getElementById('kt_inbox_reply_editor') !== null) {
  // 元素存在
  // 在这里添加处理逻辑
} else {
  // 元素不存在
  // 在这里添加处理逻辑
}

这样就避免了以上的错误。

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - quill Invalid Quill container #kt_inbox_reply_editor