element-tiptap icon indicating copy to clipboard operation
element-tiptap copied to clipboard

Error in mounted hook: "RangeError: Adding different instances of a keyed plugin (plugin$2)"

Open daleizi opened this issue 3 years ago • 1 comments

            <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)

富文本显示不出来,必须切换到别的页码,然后再进才能显示。 点击图片 或者选择文章 气泡显示不出来 ,只有一个点

daleizi avatar Jan 25 '21 03:01 daleizi

这个问题解决了吗

langwan1314 avatar Sep 07 '21 06:09 langwan1314