文章内容
2023/4/11 10:37:42,作 者: 黄兵
quill Invalid Quill container #kt_inbox_reply_editor
最近在使用 Quill 编辑器，在使用的过程中遇到一些问题，对于存在的问题做一个总结，方便大家排错。
quill Invalid Quill container #kt_inbox_reply_editor
出现问题的原因：
这个错误通常出现在 Quill 初始化时无法找到对应的容器。可能的原因是：
- 容器的 ID 不正确，或者容器没有被正确地创建和添加到页面中。
- Quill 初始化代码在容器被创建之前执行了。
可以检查一下以下几点：
- 确认容器的 ID 是否与 Quill 初始化代码中指定的一致。
- 确认容器是否被正确创建并添加到页面中。可以使用浏览器的开发者工具查看 DOM 结构确认。
- 确认 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
评论列表