element-tiptap
element-tiptap copied to clipboard
Error in mounted hook: "RangeError: Adding different instances of a keyed plugin (plugin$2)"
<el-tiptap
v-model="params.content"
:extensions="extensions"
placeholder="请输入内容"
height="480"
></el-tiptap>
</el-form-item>
import {
ElementTiptap,
Doc,
Text,
Paragraph,
Heading,
Bold,
Underline,
Italic,
Image,
Strike,
ListItem,
BulletList,
OrderedList,
TodoItem,
TodoList,
HorizontalRule,
Fullscreen,
Preview,
CodeBlock,
TextColor,
Table,
TableHeader,
TableCell,
TableRow
} from "element-tiptap";
// import element-tiptap 样式
import "element-tiptap/lib/index.css";
import { uploadImage } from "@/api/image";
extensions: [
new Doc(),
new Text(),
new Paragraph(),
new Heading({ level: 5 }),
new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
new Image({
// 默认会把图片生成 base64 字符串和内容存储在一起,如果需要自定义图片上传
uploadRequest(file) {
// 如果接口要求 Content-Type 是 multipart/form-data,则请求体必须使用 FormData
const fd = new FormData();
fd.append("image", file);
// 第1个 return 是返回 Promise 对象
// 为什么?因为 axios 本身就是返回 Promise 对象
return uploadImage(fd).then(res => {
// 这个 return 是返回最后的结果
return res.data.data.url;
});
} // 图片的上传方法,返回一个 Promise<url>
}),
new Underline({ bubble: true, menubar: true }), // 下划线
new Italic(), // 斜体
new Strike(), // 删除线
new HorizontalRule(), // 分割线
new Fullscreen(), // 全屏
new Preview(), // 预览
new CodeBlock(), // 代码块
new TextColor(), // 文本颜色
new ListItem(),
new BulletList(), // 无序列表 (必须与 ListItem 一起使用)
new OrderedList(), // 有序列表 (必须与 ListItem 一起使用)
new TodoItem(),
new TodoList(), // 任务列表 (必须与 ListItem 一起使用)
new Table(), // (与 TableHeader, TableCell, TableRow 一起使用)
new TableHeader(),
new TableCell(),
new TableRow()
]
报错 Error in mounted hook: "RangeError: Adding different instances of a keyed plugin (plugin$2)" vue.runtime.esm.js?2b0e:1888 RangeError: Adding different instances of a keyed plugin (plugin$2)
富文本显示不出来,必须切换到别的页码,然后再进才能显示。 点击图片 或者选择文章 气泡显示不出来 ,只有一个点
这个问题解决了吗