###
Vue3 中使用 WangEditor 出现 &#
39;
无效的节点选择器：editor&#
39; 报错的原因及
解决方案
在
Vue3 中使用 WangEditor
时，如果遇到 `wangEditor
.js:226
37 Uncaught (in promise) Error` 并伴随 `&#
39;
无效的节点选择器：editor&#
39;` 的错误提示，通常是因为 DOM 节点尚未完全渲染完成就尝试初始化编辑器。WangEditor 需要通过有效的 DOM 节点来创建实例，而
Vue3 的生命周期钩子可能无法及
时捕获到已渲染完毕的 DOM。
以下是详细的分析和
解决方案：
#### 原因分析
1
. **DOM 尚未加载完成**
如果在 `mounted()` 生命周期中直接初始化 WangEditor 实例，可能会因为模板还未被挂载至真实 DOM 上而导致选择器失效[^2]。
2
. **异步更新机制的影响**
Vue3 的响应式系统基于 Proxy，在某些情况下可能导致
数据绑定后的 DOM 更新存在延迟。因此即使进入了 `mounted()` 阶段，目标 DOM 可能仍未准备好[^
3]。
---
####
解决方案
##### 方法一：利用 `$nextTick`
可以通过
Vue 提供的 `$nextTick` 来确保 DOM 已经渲染完成后才执行初始化逻辑。具体实现如下：
```javascript
import {
ref, onMounted, nextTick } from &#
39;
vue&#
39;;
import E from &#
39;wangeditor&#
39;;
export default {
setup() {
const editor =
ref(null);
onMounted(() => {
nextTick(() => {
if (!editor
.value) {
editor
.value = new E("#richText");
editor
.value.config
.uploadImgServer = &#
39;http://localhost:9090/file/uploadImg&#
39;; // 图片上传接口
editor
.value.config
.uploadFileName = &#
39;file&#
39;; // 文件字段名
editor
.value.create();
}
editor
.value.txt
.html(&#
39;&#
39;); // 初始化清空内容
});
});
return {
editor,
};
},
};
```
此方法的核心在于使用 `nextTick` 确保 DOM 渲染完成后再操作[^1]。
---
##### 方法二：延
时初始化
另一种方式是在组件挂载后稍作等待再初始化编辑器。可以借助 JavaScript 的 `setTimeout` 或者手动触发事件来处理：
```javascript
methods: {
createEditor() {
this
.dialogVisible = true;
setTimeout(() => {
const editor = new E(&#
39;#div1&#
39;);
editor
.config
.height = 200;
editor
.create();
}, 1); //
添加微小延迟以确保 DOM 加载完成
},
}
```
这种方法适用于动态场景下的编辑器初始化需求。
---
##### 方法三：检查 ID 是否唯一
确认 HTML 模板
中的容器 ID 是唯一的。例如：
```html
<template>
<el-form-item label="商品描述">
<div id="richText"></div> <!-- 确保该 ID 不重复 -->
</el-form-item>
</template>
```
ID 冲突也可能引发类似的错误，需仔细排查是否存在多个相同 ID 的元素。
---
##### 方法四：结合 TypeScript 类型支持
如果项目中启用了 TypeScript，则需要额外配置类型声明文件以避免潜在
问题。可以在项目的 `tsconfig
.json` 中
添加路径映射，并创建对应的 `
.d
.ts` 文件：
```
json
{
"include": [
"
./components
.d
.ts"
]
}
```
这样能够有效
解决自定义组件缺少类型提示的
问题[^4]。
---
### 总结
上述四种方法分别针对不同情况提供了可行的
解决方案。推荐优先采用 **方法一 ($nextTick)** 和 **方法三 (检查 ID 唯一性)**，它们更贴合
实际开发环境的需求并具备较高的稳定性。
---
扫一扫
7928
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
