Vue.js 中 CKEditor 图片上传指南：告别 `CKEditorError: ckeditor-duplicated-modules`

2024-03-08 23:40:13

Vue.js 中为 CKEditor 集成图片上传的全面指南

引言

在当今的数字时代，丰富的内容是吸引和留住观众的关键。对于网站和应用程序而言，图片在传达信息和提升用户体验方面发挥着至关重要的作用。本文将探讨如何在 Vue.js 中使用 CKEditor 无缝集成图片上传功能，同时避免常见的错误，例如 CKEditorError: ckeditor-duplicated-modules。

什么是 CKEditor？

CKEditor 是一款功能强大的富文本编辑器，可用于创建和编辑在线内容。它提供了一系列功能，包括格式化文本、插入图片和视频，以及创建链接和列表。

图片上传

在 CKEditor 中添加图片上传功能可以让您轻松地将图像添加到您的内容中，从而使其更加吸引人且富有信息量。本文将指导您逐步完成使用 ckeditor5-adapter-ckfinder 适配器在 Vue.js 中设置图片上传。

解决 `CKEditorError: ckeditor-duplicated-modules` 错误

问题

在尝试集成图片上传时，您可能会遇到 CKEditorError: ckeditor-duplicated-modules 错误。这表明在您的编辑器配置中存在模块重复。

解决方案

要解决此错误，请从您的编辑器配置中移除 SimpleUploadAdapter 模块，并将其替换为 ckeditor5-adapter-ckfinder：

editorConfig: {
  plugins: [CKFinder],
  toolbar: ["imageUpload", "image"],
  ckfinder: {
    uploadUrl: "YOUR_UPLOAD_ENDPOINT_URL",
  },
}

实现图片上传

1. 安装适配器

安装 ckeditor5-adapter-ckfinder 适配器：

npm install ckeditor5-adapter-ckfinder

2. 配置 CKEditor

更新您的 CKEditor 配置以使用 ckeditor5-adapter-ckfinder 适配器：

<template>
  <ckeditor
    :editor="editor"
    v-model="editorData"
    @ready="onReady"
    @input="onChange"
    :config="editorConfig"
  ></ckeditor>
</template>

<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import CKEditor from "@ckeditor/ckeditor5-vue";
import CKFinder from "@ckeditor/ckeditor5-adapter-ckfinder";

export default {
  name: "app",
  components: {
    ckeditor: CKEditor.component,
  },
  data() {
    return {
      editor: ClassicEditor,
      editorData: "<p>Hello from CKEditor 5!</p>",

      editorConfig: {
        plugins: [CKFinder],
        toolbar: ["imageUpload", "image"],
        ckfinder: {
          uploadUrl: "YOUR_UPLOAD_ENDPOINT_URL",
        },
      },
    };
  },
  methods: {
    onReady(editor) {
      console.log("CKEditor5 Vue Component is ready to use!", editor);
    },
    onChange(data) {
      console.log(data);
    },
  },
};
</script>