search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.47k stars 3.7k forks source link

Question: Integrate CKEditor 5 by source #5685

Closed Jeff-Tian closed 4 years ago

Jeff-Tian commented 4 years ago

Hello, I am struggling at integrating the CKEditor into my project according to https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#webpack-configuration.

The webpack error message is as follows:

✖ Webpack
  Compiled with some errors in 1.16s

 ERROR  Failed to compile with 4 errors                                                                    9:05:20 PM

This dependency was not found:

* @ckeditor/ckeditor5-core/theme/icons/three-vertical-dots.svg in ./node_modules/@ckeditor/ckeditor5-ui/src/toolbar/toolbarview.js

To install it, you can run: npm install --save @ckeditor/ckeditor5-core/theme/icons/three-vertical-dots.svg

These relative modules were not found:

* ../theme/icons/undo.svg in ./node_modules/@ckeditor/ckeditor5-undo/src/undoui.js
* ../theme/icons/redo.svg in ./node_modules/@ckeditor/ckeditor5-undo/src/undoui.js
* ../../../theme/icons/dropdown-arrow.svg in ./node_modules/@ckeditor/ckeditor5-ui/src/dropdown/button/dropdownbuttonview.js

 ERROR CODE  ERR_WEBPACK_MODULE_NOT_FOUND

 DETAILS

## Possible Reasons

    1. The file does not exist
    2. Case problem

But I checked the files they are all exists and there is no case issues. And I have configured the loaders as per the doc shows.

Where can go wrong?

Thanks in advance!

Mgsy commented 4 years ago

Hi! Did you install all the required packages? This guide is a good starting point for building the editor from the source.

Jeff-Tian commented 4 years ago

Thanks for helping!

I follow the guide and installed the following packages (webpack already installed before)

npm install --save \
    postcss-loader@3 \
    raw-loader@3 \
    style-loader@1 \

Result:

+ style-loader@1.0.0
+ postcss-loader@3.0.0
+ raw-loader@3.1.0

Now the webpack command claims:

 ERROR  Failed to compile with 16 errors                                                                  10:14:29 AM

 error  in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/button/button.css

Syntax Error: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(1:1) Unknown word

> 1 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--24-1!./button.css");
    | ^
  2 |
  3 | if (typeof content === 'string') {

 @ ./node_modules/@ckeditor/ckeditor5-ui/src/button/buttonview.js 17:0-50
 @ ./node_modules/@ckeditor/ckeditor5-undo/src/undoui.js
 @ ./node_modules/@ckeditor/ckeditor5-undo/src/undo.js
Mgsy commented 4 years ago

Can you share your package.json, webpack and CKEditor 5 config files?

Jeff-Tian commented 4 years ago

Thanks for your helping!

The above error can be fixed by deleting the postcss rules from webpack, with only a ugly looking but the function is OK.

(1:1) Unknown word

1 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--24-1!./button.css"); | ^ 2 | 3 | if (typeof content === 'string') {

So if I want to bring the normal look and feel back I think I should add back the postcss rules. However it will fail the build.

My package.json is as follows:

{
  "name": "xxx",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "umi dev",
    "mock": "umi dev",
    "dev": "UMI_ENV=dev MOCK=none umi dev",
    "build": "NODE_ENV=production umi build",
    "test": "umi test",
    "lint:es": "eslint --ext .js src mock tests",
    "lint:ts": "tslint \"src/**/*.ts\" \"src/**/*.tsx\"",
    "precommit": "lint-staged"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-basic-styles": "^11.1.4",
    "@ckeditor/ckeditor5-build-classic": "^12.3.1",
    "@ckeditor/ckeditor5-dev-utils": "^12.0.5",
    "@ckeditor/ckeditor5-editor-classic": "^15.0.0",
    "@ckeditor/ckeditor5-essentials": "^15.0.0",
    "@ckeditor/ckeditor5-react": "^1.1.3",
    "@ckeditor/ckeditor5-theme-lark": "^15.0.0",
    "@ckeditor/ckeditor5-word-count": "^10.0.2",
    "@types/lodash": "^4.14.136",
    "@types/node": "^12.7.1",
    "@types/node-sass": "^4.11.0",
    "@types/react-custom-scrollbars": "^4.0.6",
    "@uni/uni-user-api": "^4.1.0",
    "@uni/website-components": "1.2.15",
    "antd": "3.22.2",
    "css-type-loader": "^1.1.2",
    "dva": "^2.6.0-beta.6",
    "dva-logger": "^1.0.0",
    "lodash": "^4.17.15",
    "node-sass": "^4.12.0",
    "postcss-loader": "^3.0.0",
    "raw-loader": "^3.1.0",
    "react": "16.8.1",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "16.8.1",
    "sa-sdk-javascript": "^1.14.9",
    "sass-loader": "^7.1.0",
    "style-loader": "^1.0.0",
    "typescript": "^3.6.3",
    "umi-request": "^1.2.3"
  },
  "devDependencies": {
    "@ckeditor/ckeditor5-clipboard": "latest",
    "@ckeditor/ckeditor5-core": "latest",
    "@ckeditor/ckeditor5-engine": "latest",
    "@ckeditor/ckeditor5-enter": "latest",
    "@ckeditor/ckeditor5-heading": "^15.0.0",
    "@ckeditor/ckeditor5-paragraph": "^15.0.0",
    "@ckeditor/ckeditor5-typing": "latest",
    "@ckeditor/ckeditor5-ui": "latest",
    "@ckeditor/ckeditor5-undo": "^15.0.0",
    "@ckeditor/ckeditor5-upload": "^15.0.0",
    "@ckeditor/ckeditor5-utils": "latest",
    "@types/jest": "^23.3.12",
    "@types/react": "^16.7.18",
    "@types/react-dom": "^16.0.11",
    "@types/react-test-renderer": "^16.0.3",
    "@typescript-eslint/parser": "^2.3.1",
    "babel-eslint": "^9.0.0",
    "eslint": "^5.4.0",
    "eslint-config-umi": "^1.4.0",
    "eslint-plugin-flowtype": "^2.50.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.11.1",
    "husky": "^0.14.3",
    "lint-staged": "^7.2.2",
    "react-test-renderer": "^16.7.0",
    "tslint": "^5.12.0",
    "tslint-eslint-rules": "^5.4.0",
    "tslint-react": "^3.6.0",
    "umi": "^2.7.0",
    "umi-plugin-react": "^1.8.0",
    "umi-types": "^0.3.0"
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "tslint --fix",
      "git add"
    ],
    "*.{js,jsx}": [
      "eslint --fix",
      "git add"
    ]
  },
  "engines": {
    "node": ">=8.0.0"
  }
}

webpack is as follows:

  chainWebpack(config) {
    // config.plugin('@ckeditor').use(webpack.ProviderPlugin, [{ '@ckeditor': '@ckeditor' }]);

    config.module
      .rule('ckeditor5-svg')
      .test(/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/)
      .use('raw-loader')
      .loader('raw-loader');

    // If I deleted the following then the build will success, only issue is the editor is ugly
    // If I keep the following the building will fail
    config.module
      .rule('ckeditor5-css')
      .test(/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/)
      .use('style-loader')
      .loader('style-loader')
      .options({
        injectType: 'singletonStyleTag',
      })
      .end()
      .use('postcss-loader')
      .loader('postcss-loader')
      .options(
        styles.getPostCssConfig({
          themeImporter: {
            themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
          },
          minify: true,
        }),
      );
  },

CKEditor5 config file:

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
// import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
// import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
const CKEditor = require('@ckeditor/ckeditor5-react');

export default class MyClassicEditor extends ClassicEditor {
  constructor(sourceElementOrData, config) {
    super(sourceElementOrData, config);
  }

  static create(sourceElementOrData, config = {}) {
    return ClassicEditor.create(sourceElementOrData, {
      plugins: [Heading, Essentials, Paragraph, FileRepository],
      toolbar: ['heading', 'bold', 'italic'],
      ...config,
    });
  }
}

// Finaly CKEditor in use:
<CKEditor
          editor={MyClassicEditor}
          data={'xxx'}
          onInit={(editor: any) => {}
          onChange={(e: any, editor: any) => {
            console.log('editor = ', editor);
          }}
          config={{
            extraPlugins: [],
            placeholder: 'Please write',
            mediaEmbed: {
              extraProviders: [],
            },
          }}
        />
Mgsy commented 4 years ago

I can see that you integrate CKEditor 5 with React. We have a dedicated guide about this integration which includes instructions on how to build the editor from the source. Please, see it here.

Jeff-Tian commented 4 years ago

I've gone through almost all the documents and I believe it works if I just integrate CKEditor 5 with pure React project.

The problem here is I am integrating umi js and CKEditor 5. I can get it work with the packaged CKEditor 5, see: https://uniheart.pa-ca.me/form/editor

But I met issues if I try to build it from source with umi js.

The issues should caused by the umijs's webpack configuration, but I don't know how to configure the CKEditor 5 webpack in umijs project with chainWebpack.

I tried the following:

const { styles } = require('@ckeditor/ckeditor5-dev-utils');

 chainWebpack(config) {
    // config.plugin('@ckeditor').use(webpack.ProviderPlugin, [{ '@ckeditor': '@ckeditor' }]);

    config.module
      .rule('ckeditor5-svg')
      .test(/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/)
      .use('raw-loader')
      .loader('raw-loader');

    config.module
      .rule('ckeditor5-css')
      .test(/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/)
      .use('style-loader')
      .loader('style-loader')
      .options({
        injectType: 'singletonStyleTag',
      })
      .end()
      .use('postcss-loader')
      .loader('postcss-loader')
      .options(
        styles.getPostCssConfig({
          themeImporter: {
            themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
          },
          minify: true,
        }),
      );
}

But with no luck, it says:

 error  in ./node_modules/@ckeditor/ckeditor5-engine/theme/placeholder.css

Syntax Error: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(1:1) Unknown word

> 1 | var content = require("!!../../../postcss-loader/src/index.js??ref--24-1!./placeholder.css");
    | ^
  2 |
  3 | if (typeof content === 'string') {

 @ ./node_modules/@ckeditor/ckeditor5-engine/src/view/placeholder.js 10:0-37
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditorui.js
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js

Really hope that CKEditor 5 can give an example that integrated in a umijs project!

pomek commented 4 years ago

Hi @Jeff-Tian,

chainWebpack(config) { suggests that you do not modify webpack configuration directly. A similar function I saw in our documentation, on the page related to Vue integration.

Could you take a look – https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-ckeditor-from-source – and apply those rules to your configuration?

AFAICS, your CSS loader is wrong. We're using postcss-loader while you're trying to use style-loader and because of that, it throws.

Jeff-Tian commented 4 years ago

AFAICS, your CSS loader is wrong. We're using postcss-loader while you're trying to use style-loader and because of that, it throws.

Thanks a ton for this! I removed the css-loader and keep only postcss-loader now the error is gone and the UI looks great!

Jeff-Tian commented 4 years ago

@pomek is the document here misleading?

https://ckeditor.com/docs/ckeditor5/latest/framework/guides/quick-start.html:

image

javahuang commented 3 years ago

@Jeff-Tian hi~ 请问这个问题，您后面是如何解决的。能提供下 umi 的相关配置吗，谢谢

yangfan0095 commented 3 years ago

@javahuang ckeditor online builder 完了静态资源直接引入 umi项目可以试试

wobo-aqib commented 2 years ago

AFAICS, your CSS loader is wrong. We're using postcss-loader while you're trying to use style-loader and because of that, it throws.

Thanks a ton for this! I removed the css-loader and keep only postcss-loader now the error is gone and the UI looks great!

@pomek is the document here misleading?

https://ckeditor.com/docs/ckeditor5/latest/framework/guides/quick-start.html:

image

Can you suggest what else should be the config.

Jeff-Tian commented 2 years ago

AFAICS, your CSS loader is wrong. We're using postcss-loader while you're trying to use style-loader and because of that, it throws.

Thanks a ton for this! I removed the css-loader and keep only postcss-loader now the error is gone and the UI looks great!

@pomek is the document here misleading? https://ckeditor.com/docs/ckeditor5/latest/framework/guides/quick-start.html: image

Can you suggest what else should be the config.

Sorry for late response. As I mentioned above, the style-loader makes build fail, and removing it makes build pass. So the suggested config is NOT including the style-loader.

However, it's only applied to the old versions at that time. I'm not sure whether it applies to current versions of ckeditor.

Jeff-Tian commented 2 years ago

@Jeff-Tian hi~ 请问这个问题，您后面是如何解决的。能提供下 umi 的相关配置吗，谢谢

如上面所说的，删除了 style-loader 之后就好了。但是这只针对之前那个版本有效，当时是在一家公司里用的，后来离职了，相应的代码没有了，所以那个版本的 umi 设置找不到了。

但是我重新做了一个可行的，详细配置可以参考这个， @yangfan0095 ：

https://github.com/Jeff-Tian/umi-ckeditor5/blob/main/.umirc.ts 。该库部署到 Vercel 后，是这样的：

https://umi-ckeditor5.vercel.app/

目前感觉 umi 和 CKEditor 使用源代码集成方式，坑在具体使用 @ckeditor 系列哪个版本的包上。详情可以参考：

https://www.zhihu.com/consult/conversation/1557390319976394752/graphic-chat

aryaonehub commented 1 year ago

(1:1) Unknown word

1 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--24-1!./button.css"); | ^ 2 | 3 | if (typeof content === 'string') {

Hello how do you fix the error, because I have tried to follow your steps and still get the same error

Jeff-Tian commented 1 year ago

(1:1) Unknown word

1 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--24-1!./button.css"); | ^ 2 | 3 | if (typeof content === 'string') {

Hello how do you fix the error, because I have tried to follow your steps and still get the same error

Hi @aryaonehub, I fixed it by removing the style-loader.

I made a working example here: https://umi-ckeditor5.vercel.app/, and the config file can be found here: https://github.com/Jeff-Tian/umi-ckeditor5/blob/main/.umirc.ts.

Hope it helps. If you still get errors, you can share your repo with others to reproduce.

aryaonehub commented 1 year ago

chainWebpack: function (memo) { / ckeditor5 / memo.plugin('CKEditorWebpackPlugin').use(CKEditorWebpackPlugin, [{}]); memo.module .rule('svg') .exclude.add(path.join(__dirname, 'node_modules', '@ckeditor')); memo.module .rule('css') .exclude.add(path.join(__dirname, 'node_modules', '@ckeditor')); memo.module .rule('cke-svg') .test(/ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+.svg$/) .use('raw-loader') .loader('raw-loader');

const ckeCss = memo.module
  .rule('cke-css')
  .test(/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/);
ckeCss
  .use('style-loader')
  .loader('style-loader')
  .options({ singleton: true  })
  .end()
  .use('postcss-loader')
  .loader('postcss-loader')
  .options(
    styles.getPostCssConfig({
      themeImporter: {
        themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
      },
      minify: true,
    }),
  );

i have followed you in https://umi-ckeditor5.vercel.app/ and have installed the same version of ckeditor but still getting the error

error in ./node_modules/ckeditor5/node_modules/@ckeditor/ckeditor5-ui/theme/globals/globals.css

Module build failed (from ./node_modules/style-loader/dist/index.js): ValidationError: Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.

  • options has an unknown property 'singleton'. These properties are valid: object { injectType?, attributes?, insert?, base? } at validate (Y:\onehub\MMV3\mmv3FE\mmonlinev3-fe\node_modules\style-loader\node_modules\schema-utils\dist\validate.js:98:11) at Object.loader (Y:\onehub\MMV3\mmv3FE\mmonlinev3-fe\node_modules\style-loader\dist\index.js:17:28)
solarisy commented 1 year ago

I had the same problem when integrating with angular.

package.json

{
  "name": "boss",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 192.168.100.246 --port 4830 --open --ssl true --ssl-cert \"./cert/server.crt\" --ssl-key \"./cert/server.key\" --disable-host-check",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/cdk": "^16.2.5",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/forms": "^16.2.0",
    "@angular/material": "^16.2.5",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "@ckeditor/ckeditor5-angular": "^7.0.0",
    "@ckeditor/ckeditor5-build-classic": "^39.0.2",
    "@ckeditor/ckeditor5-core": "^39.0.2",
    "@ckeditor/ckeditor5-engine": "^39.0.2",
    "@ckeditor/ckeditor5-markdown-gfm": "^39.0.2",
    "@ckeditor/ckeditor5-utils": "^39.0.2",
    "@ckeditor/ckeditor5-watchdog": "^39.0.2",
    "@dicebear/collection": "^5.3.4",
    "@dicebear/core": "^5.3.4",
    "@kolkov/angular-editor": "^3.0.0-beta.0",
    "@material/material-color-utilities": "^0.2.6",
    "@ng-matero/extensions": "^16.1.0",
    "agora-rtc-sdk-ng": "^4.17.2",
    "ali-oss": "^6.17.1",
    "angular-calendar": "^0.31.0",
    "angular2-hotkeys": "^13.3.0",
    "angular2-websocket": "^0.9.8",
    "color": "^4.2.3",
    "date-fns": "^2.29.3",
    "file-saver": "^2.0.5",
    "html2pdf.js": "^0.10.1",
    "marked": "^4.3.0",
    "ngx-capture": "^0.13.0",
    "ngx-colors": "^3.5.2",
    "ngx-countdown": "^15.0.0",
    "ngx-device-detector": "^5.0.1",
    "ngx-doc-viewer": "^15.0.1",
    "ngx-image-cropper": "^6.3.3",
    "protobufjs": "^7.2.3",
    "rxjs": "~7.8.0",
    "short-unique-id": "^4.4.4",
    "tslib": "^2.3.0",
    "uuid": "^9.0.0",
    "video.js": "^8.5.2",
    "xlsx": "^0.18.5",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.0",
    "@angular/cli": "~16.2.0",
    "@angular/compiler-cli": "^16.2.0",
    "@types/ali-oss": "^6.16.7",
    "@types/ckeditor__ckeditor5-build-classic": "^29.0.1",
    "@types/color": "^3.0.3",
    "@types/file-saver": "^2.0.5",
    "@types/jasmine": "~4.3.0",
    "@types/marked": "^4.0.8",
    "@types/uuid": "^9.0.1",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3"
  }
}

some error message:

./node_modules/@ckeditor/ckeditor5-core/theme/icons/align-bottom.svg:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m9.239 13.938-2.88-1.663a.75.75 0 0 1 .75-1.3L9 12.067V4.75a.75.75 0 1 1 1.5 0v7.318l1.89-1.093a.75.75 0 0 1 .75 1.3l-2.879 1.663a.752.752 0 0 1-.511.187.752.752 0 0 1-.511-.187zM4.25 17a.75.75 0 1 1 0-1.5h10.5a.75.75 0 0 1 0 1.5H4.25z"/></svg>

./node_modules/@ckeditor/ckeditor5-core/theme/icons/align-center.svg:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3.75c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm0 8c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm2.286 4c0 .414.336.75.75.75h9.928a.75.75 0 1 0 0-1.5H5.036a.75.75 0 0 0-.75.75zm0-8c0 .414.336.75.75.75h9.928a.75.75 0 1 0 0-1.5H5.036a.75.75 0 0 0-.75.75z"/></svg> 

./node_modules/@ckeditor/ckeditor5-core/theme/icons/align-justify.svg:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3.75c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm0 8c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm0 4c0 .414.336.75.75.75h9.929a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm0-8c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75z"/></svg>        

./node_modules/@ckeditor/ckeditor5-core/theme/icons/align-left.svg:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3.75c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm0 8c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm0 4c0 .414.336.75.75.75h9.929a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm0-8c0 .414.336.75.75.75h9.929a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75z"/></svg>       

./node_modules/@ckeditor/ckeditor5-core/theme/icons/align-middle.svg:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.75 11.875a.752.752 0 0 1 .508.184l2.883 1.666a.75.75 0 0 1-.659 1.344l-.091-.044-1.892-1.093.001 4.318a.75.75 0 1 1-1.5 0v-4.317l-1.89 1.092a.75.75 0 0 1-.75-1.3l2.879-1.663a.752.752 0 0 1 .51-.187zM15.25 9a.75.75 0 1 1 0 1.5H4.75a.75.75 0 1 1 0-1.5h10.5zM9.75.375a.75.75 0 0 1 .75.75v4.318l1.89-1.093.092-.045a.75.75 0 0 1 .659 1.344l-2.883 1.667a.752.752 0 0 1-.508.184.752.752 0 0 1-.511-.187L6.359 5.65a.75.75 0 0 1 .75-1.299L9 5.442V1.125a.75.75 0 0 1 .75-.75z"/></svg>

If I use the Markdown plug-in in my code, the above error will appear:

import { Markdown } from '@ckeditor/ckeditor5-markdown-gfm';
 ckEditorConfig: any = {
    plugins: [Markdown],
    extraPlugins: [TheUploadAdapterPlugin],
  };

Comment out the code related to the Markdown plug-in and run OK. The following code runs OK:

// import { Markdown } from '@ckeditor/ckeditor5-markdown-gfm';

 ckEditorConfig: any = {
   //  plugins: [Markdown],
    extraPlugins: [TheUploadAdapterPlugin],
  };
Witoso commented 1 year ago

@solarisy, looks like you want to add a plugin to a predefined build. It's not possible, you need to create a custom one.