Can't add plugins about ckeditor5-vue

[MarioMunnoz]

First library that you have to build plugins and stuff from source by yourself.. what a shi... library. Quite difficult to implement..

[AliN11]

Hi. I tried to go with that guide by which rose multiple errors. After doing npm run dev, the first error was:

ERROR in ./node_modules/@ckeditor/ckeditor5-link/theme/linkform.css (./node_modules/css-loader??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/@ckeditor/ckeditor5-link/theme/linkform.css)
Module not found: Error: Can't resolve './@ckeditor/ckeditor5-theme-lark/theme/mixins/_rwd.css' in 'E:\xampp\htdocs\xampp\external\the-project\node_modules\@ckeditor\ckeditor5-link\theme'

Despite I'm sure that the _rwd.css file exists, I removed this line:
@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rwd.css" from linkform.css and linkform.css

After that, compilation completed successfully. But there was another error. In the browser console I get TypeError: "svg is null".

Any help? Thanks in advance.

[AliN11]

@Mgsy I don't know why this is disabled. I'll check your guide and inform you here. Thanks.

[Mgsy]

Hello, you should build the editor from the source. Did you follow our guide?

[AliN11]

@Mgsy Thanks for this fast response.
Edit: Let me try it...

[Mgsy]

Can you share your editor configuration code and vue.config.js file? And are you sure that you've installed all dependencies?

[AliN11]

@Mgsy Problem solved. I'm using CKEditor inside a Laravel app. So I had to change the configuration based on this issue. It would be good if it mentioned somewhere.

BTW Thanks a lot for your help and attentions.

Edit: Can you tell me why ckfinder logo is disabled on the editor? When I click on it, nothing happens.

[Mgsy]

I'm glad that you managed to solve your problem.

About CKFinder - I can't reproduce your issue, after adding CKFinder to the editor (also in Vue integration), the icon is enabled. Did you see our CKFinder integration guide?

[AliN11]

@Mgsy Although I followed your guide, that problem (disabled ckfinder icon) existed for image plugin too and unfortunately I had to switch to another text editor.
Thanks.

[Mgsy]

@AliN11, I'm sorry to hear that you struggled with this problem. However, can I ask you to create a new ticket and describe the exact steps needed to reproduce the issue? It will be very helpful for us, so we'll be able to investigate it and fix the bug (if needed).

[Jeff-Tian]

Hi. I tried to go with that guide by which rose multiple errors. After doing npm run dev, the first error was:

ERROR in ./node_modules/@ckeditor/ckeditor5-link/theme/linkform.css (./node_modules/css-loader??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/@ckeditor/ckeditor5-link/theme/linkform.css)
Module not found: Error: Can't resolve './@ckeditor/ckeditor5-theme-lark/theme/mixins/_rwd.css' in 'E:\xampp\htdocs\xampp\external\the-project\node_modules\@ckeditor\ckeditor5-link\theme'

Despite I'm sure that the _rwd.css file exists, I removed this line:
@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rwd.css" from linkform.css and linkform.css

After that, compilation completed successfully. But there was another error. In the browser console I get TypeError: "svg is null".

Any help? Thanks in advance.

I met the exact same issue, can you share how did you fix it?

[Jeff-Tian]

OK, fixed by

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