Custom Build Using ImageUpload & SimpleUploadAdapter Results in "plugincollection-plugin-name-conflict" Error

[PushyPants]

Overview

I'm trying to use the ImageUpload plugin and the SimpleUploadAdapter to control the image upload. Following the documentation as best I can, I've seen what appear to be conflicts in information regarding either my setup or the documentation itself (or my understanding of it). I'm building a custom editor for a Vue 2 project using @ckeditor/ckeditor5-vue2 built on top of @ckeditor/ckeditor5-editor-classic as the docs suggest. When using a very simple setup of just a basic editor with image plugins and the simple uploader I get this error:

ckeditor.js:5 CKEditorError: plugincollection-plugin-name-conflict {"pluginName":"FileRepository"}

If I comment out either of those 2 plugins the error goes away but trying to use them in conjunction, as the docs suggest, I get the error.

---

Perhaps the first problem I'm running into is that the docs for the SimpleUploadAdapter say:

This feature is not available in any of the predefined builds.

This lead me to look into building a custom adapter. But reading into those docs ( specifically the section How does the image upload work? ) the bottom of that section states that for image upload to work the image upload plugin must be enabled and the upload adapter needs to be defined and configured -> then pointing at one of the existing upload adapter suggesting that my desired setup should potentially be possible:

To sum up, for the image upload to work in the rich-text editor, two conditions must be true:

• The image upload plugin must be enabled in the editor. It is enabled by default in all official builds, but if you are customizing CKEditor 5, do not forget to include it.
• The upload adapter needs to be defined. [ *** This can be done by using (enabling and configuring): *** ]
  • [ *** One of the existing upload adapters. *** ]
  • Your custom upload adapter and handling uploaded files on your server back–end.

I'm not sure if this is a docs issue, a me issue, or a bug

---

That leads to a potential second problem - If I cant use the simple uploader in a predefined build then I probably need to build a custom one.

Referring to this part of the documentation about When to use the framework, it sounds like that may need to be my use case.

At the bottom of that page, however, in the What’s next? section:

What’s next?
To start using the framework refer to:

• The Quick start guide.
• The Introduction to the framework
• The step-by-step crash course.

Both the Quick Start > Creating an Editor and the Crash Course > Creating an Editor, even the separate doc Building the Editor from Source, all start and build off of the classic editor... which appears to be a predefined build... which I can't use because the simple upload adapter can't be used. So there appears to be no instruction on how to truly build an editor from scratch.

📝 Provide detailed reproduction steps (if any)

// imports

import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic";
import { SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload';
import {
  Image,
  ImageCaption,
  ImageResize,
  ImageStyle,
  ImageToolbar,
  ImageUpload,
} from "@ckeditor/ckeditor5-image";

// configuration

{
 toolbar: {
  items: [
   "bold",
   "italic",
   "imageUpload"
  ],
 },
  plugins: [
   Bold,
   Italic,
   Image,
   ImageCaption,
   ImageResize,
   ImageStyle,
   ImageToolbar,
   LinkImage,
   ImageUpload,
   SimpleUploadAdapter,
  ],
  language: "en",
   image: {
    toolbar: [
     "imageTextAlternative",
     "toggleImageCaption",
     "imageStyle:inline",
     "imageStyle:block",
     "imageStyle:side",
     "linkImage",
    ],
   },
  simpleUpload: {
   uploadUrl: 'http://example.com',
 }
}

✔️ Expected result

Allowed use of configured plugin without error

❌ Actual result

plugincollection-plugin-name-conflict {"pluginName":"FileRepository"}

📃 Other details

• Browser: Chrome 120.0.6099.71 (Official Build) (64-bit)
• OS: Windows 10 Version 22H2 (OS Build 19045.3693)
• CKEditor version: 39.0.2
• Installed CKEditor plugins: Below is a list from the package.json file *I pared down the imports to what you see above, for testing, in order to eliminate other plugins as conflicting. They ARE, however, still installed and in Node Modules. Just not imported into the editor.
  // package.json

  "dependencies": {
    "@ckeditor/ckeditor5-adapter-ckfinder": "39.0.2",
    "@ckeditor/ckeditor5-alignment": "39.0.2",
    "@ckeditor/ckeditor5-autoformat": "39.0.2",
    "@ckeditor/ckeditor5-basic-styles": "39.0.2",
    "@ckeditor/ckeditor5-block-quote": "39.0.2",
    "@ckeditor/ckeditor5-code-block": "39.0.2",
    "@ckeditor/ckeditor5-core": "^39.0.2",
    "@ckeditor/ckeditor5-editor-classic": "39.0.2",
    "@ckeditor/ckeditor5-essentials": "39.0.2",
    "@ckeditor/ckeditor5-font": "39.0.2",
    "@ckeditor/ckeditor5-heading": "39.0.2",
    "@ckeditor/ckeditor5-highlight": "39.0.2",
    "@ckeditor/ckeditor5-horizontal-line": "39.0.2",
    "@ckeditor/ckeditor5-html-support": "39.0.2",
    "@ckeditor/ckeditor5-image": "39.0.2",
    "@ckeditor/ckeditor5-indent": "39.0.2",
    "@ckeditor/ckeditor5-link": "39.0.2",
    "@ckeditor/ckeditor5-list": "39.0.2",
    "@ckeditor/ckeditor5-markdown-gfm": "39.0.2",
    "@ckeditor/ckeditor5-mention": "39.0.2",
    "@ckeditor/ckeditor5-paragraph": "39.0.2",
    "@ckeditor/ckeditor5-paste-from-office": "39.0.2",
    "@ckeditor/ckeditor5-remove-format": "39.0.2",
    "@ckeditor/ckeditor5-restricted-editing": "39.0.2",
    "@ckeditor/ckeditor5-select-all": "39.0.2",
    "@ckeditor/ckeditor5-style": "39.0.2",
    "@ckeditor/ckeditor5-table": "39.0.2",
    "@ckeditor/ckeditor5-typing": "39.0.2",
    "@ckeditor/ckeditor5-upload": "^39.0.2",
    "@ckeditor/ckeditor5-vue2": "^3.0.1",
    "@ckeditor/ckeditor5-widget": "^39.0.2",
    "@ckeditor/ckeditor5-word-count": "39.0.2",
    "axios": "^1.6.2",
    "core-js": "^3.32.1",
    "mdi": "^2.2.43",
    "uuid": "^9.0.1",
    "vue": "^2.6.14",
    "vue-router": "^3.6.5",
    "vue-template-compiler": "^2.6.14",
    "vuetify": "^2.4.6",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@ckeditor/ckeditor5-dev-translations": "^38.4.1",
    "@ckeditor/ckeditor5-dev-utils": "^38.4.1",
    "@ckeditor/ckeditor5-inspector": "^4.1.0",
    "@ckeditor/ckeditor5-theme-lark": "^39.0.2",
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
    "deepmerge": "^4.3.1",
    "sass": "~1.32",
    "sass-loader": "^13.3.2"
  }

[Witoso]

Hi! Thank you for your patience.

AFAICS, You are using a custom build, as a predefined build would be imported as @ckeditor/ckeditor5-build-classic.

That leads to a potential second problem - If I cant use the simple uploader in a predefined build then I probably need to build a custom one.

No, you don't. In this case, you just need to prepare your custom build and load SimpleUploadAdapter (we are fixing this confusion #15502)

I cannot reproduce the issue when I use the online builder with your set of plugins. What kind of bundler (Vite/webpack?) are you using? CKEditor as now needs a specific setup of those to load correctly.

[PushyPants]

oh man!!! it's little stuff like ckeditor5-editor-classic/ckeditor5-build-classic that have thrown me off the whole time! I've been working with trying to get a feature-complete but semi-custom implementation going, off and on for months. One of the things I found the hardest was that the naming conventions are so close to one another that it's not entirely clear when something isn't going right.

I've built this in a sandbox app that is separate from our actual app, in order to get this built out for our custom requirements. The project this is going into is a couple of years old and currently using Quill, which has been deprecated. That project was built off of node 12.0.8 and we can get it upgraded to ~16 without everything breaking, but can't get any higher without more major rebuild like this editor replacement.

So the sandbox I built is using Vue 2, Vue-cli, Babel, Webpack, configured through the vue.config.js file

• Node: 16.20.2
• Vue: 2.6.14
• @vue/cli-plugin-babel: 5.0.8
  • webpack: 5.88.2

// vue.config.js - based off the docs with some alias additions

const path = require("path");
const {
  CKEditorTranslationsPlugin,
} = require("@ckeditor/ckeditor5-dev-translations");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");

module.exports = {
  // The source of CKEditor 5 is encapsulated in ES6 modules. By default, the code
  // from the node_modules directory is not transpiled, so you must explicitly tell
  // the CLI tools to transpile JavaScript files in all ckeditor5-* modules.
  transpileDependencies: [/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/],

  configureWebpack: {
    resolve: {
      alias: {
        src: path.resolve(__dirname, "src/"),
        Plugins: path.resolve(__dirname, "src/plugins/"),
        plugins: path.resolve(__dirname, "src/plugins/"),
        components: path.resolve(__dirname, "src/components/"),
        api: path.resolve(__dirname, "src/api/"),
        pages: path.resolve(__dirname, "src/pages/"),
        router: path.resolve(__dirname, "src/router/"),
        store: path.resolve(__dirname, "src/store/"),
        assets: path.resolve(__dirname, "src/assets/"),
      },
    },
    plugins: [
      // CKEditor 5 needs its own plugin to be built using webpack.
      new CKEditorTranslationsPlugin({
        // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
        language: "en",

        // Append translations to the file matching the `app` name.
        translationsOutputFile: /app/,
      }),
    ],
    module: {
      rules: [
        {
          test: /\.s(c|a)ss$/,
          use: [
            "vue-style-loader",
            "css-loader",
            {
              loader: "sass-loader",
              // Requires sass-loader@^7.0.0
              options: {
                implementation: require("sass"),
                indentedSyntax: true, // optional
              },
              // Requires >= sass-loader@^8.0.0
              options: {
                implementation: require("sass"),
                sassOptions: {
                  indentedSyntax: true, // optional
                },
              },
            },
          ],
        },
      ],
    },
  },

  // Vue CLI would normally use its own loader to load .svg and .css files, however:
  //	1. The icons used by CKEditor 5 must be loaded using raw-loader,
  //	2. The CSS used by CKEditor 5 must be transpiled using PostCSS to load properly.
  chainWebpack: (config) => {
    // (1.) To handle editor icons, get the default rule for *.svg files first:
    const svgRule = config.module.rule("svg");

    // Then you can either:
    //
    // * clear all loaders for existing 'svg' rule:
    //
    //		svgRule.uses.clear();
    //
    // * or exclude ckeditor directory from node_modules:
    svgRule.exclude.add(path.join(__dirname, "node_modules", "@ckeditor"));

    // Add an entry for *.svg files belonging to CKEditor. You can either:
    //
    // * modify the existing 'svg' rule:
    //
    //		svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
    //
    // * or add a new one:
    config.module
      .rule("cke-svg")
      .test(/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/)
      .use("raw-loader")
      .loader("raw-loader");

    // (2.) Transpile the .css files imported by the editor using PostCSS.
    // Make sure only the CSS belonging to ckeditor5-* packages is processed this way.
    config.module
      .rule("cke-css")
      .test(/ckeditor5-[^/\\]+[/\\].+\.css$/)
      .use("postcss-loader")
      .loader("postcss-loader")
      .tap(() => {
        return {
          postcssOptions: styles.getPostCssConfig({
            themeImporter: {
              themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"),
            },
            minify: true,
          }),
        };
      });
  },
};

unrelated to this issue, but a problem none the less... with this particular configuration, <script lang="scss"> in a vue.js file breaks, so there looks to be an issue with the sass/scss configuration in the docs to this particular setup of versions.

please let me know what other information I can provide to make this any easier. I'll need to remove/replace some test data but could put the project up on github if you'd like to take a full look at it.

[Witoso]

Sorry for the late reply! I would appreciate it if you could provide some minimal reproducible sample.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).