Load plugins about ckeditor5-vue

[ggirodda]

@jodator Thank you for your answer, now it works. Here you can find a valid exemple for integration with nuxtjs:

const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin")
const CKEditorStyles = require("@ckeditor/ckeditor5-dev-utils").styles

module.exports = {
  // some config before
  build: {
    plugins: [
      // CKEditor needs its own plugin to be built using webpack.
      new CKEditorWebpackPlugin({
          // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
          language: "en"
      })
    ],
    // Various modules in the CKEditor source code import .css files.
    // These files must be transpiled using PostCSS in order to load properly.
    postcss: CKEditorStyles.getPostCssConfig({
        themeImporter: {
            themePath: require.resolve("@ckeditor/ckeditor5-theme-lark")
        },
        minify: true
    }),
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      const filesRuleIndex = config.module.rules.findIndex(item => {
        return `${item.test}` == "/\\.(png|jpe?g|gif|svg|webp)$/i"
      })
      if (filesRuleIndex !== -1) {
        config.module.rules[filesRuleIndex].test = /\.(png|jpe?g|gif|webp)$/
        const svgRule = config.module.rules[filesRuleIndex]
        svgRule.test = /\.svg/
        svgRule.exclude = svgRule.exclude || []
        svgRule.exclude.push(__dirname + "/node_modules/@ckeditor")
        config.module.rules.push(svgRule)
      }
      // Vue CLI would normally use its own loader to load .svg files. The icons used by
      // CKEditor should be loaded using raw-loader instead.
      config.module.rules.push({
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: ["raw-loader"]
      })
    }
}

[ponpondev]

The price for adding plugins and configuring is so much I decided to build the custom editor. And it just WORKS. Here's how to do it

Aside from the issues in this thread, I also ran into Some CKEditor 5 modules are duplicated and Cannot read property 'getAttribute' of null

The custom build reduces my nuxt.config.js by a BUNCH, and makes the project much cleaner. For those who run into SSR failing, check this

I have strong thoughts the repo is not very well compatible with nuxt, so this workaround is imo the most optimal way to go for now...

[Reinmar]

I guess you're trying to use an existing editor build. That won't work. You need to use it with the editor integrated from source – e.g. @ckeditor/ckeditor5-editor-classic. See https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-the-editor-from-source

[kl3sk]

That true, I installed this build and now (with all plugins enabled)

TypeError: "svg is null"

[Reinmar]

That's covered a bit earlier in the docs :) https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#configuring-vueconfigjs. In general, you have to go through the entire "Integrating CKEditor 5 from source" section.

[kl3sk]

My bad I've read it earlier ...

So I'am going to build my own editor.

[kl3sk]

I think i have a conflict with css-loader used by vuetify

An extra config is maybe require for postcss-loader inside vue.config.js

[kl3sk]

I did not achieve it in conjunction with Vuetify that seems to use css-loader. I don't know how to modify (I think vue.config.js) to make it working.

Does this component will allow pulugin customisation ?

[ggirodda]

I have the same problem with nuxt. I follow the docs but I still have 'svg is null'. Here is my nuxt.config.js file:

const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin")
const CKEditorStyles = require("@ckeditor/ckeditor5-dev-utils").styles

module.exports = {
  // some config before
  build: {
    plugins: [
      // CKEditor needs its own plugin to be built using webpack.
      new CKEditorWebpackPlugin({
          // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
          language: "en"
      })
    ],
    // Various modules in the CKEditor source code import .css files.
    // These files must be transpiled using PostCSS in order to load properly.
    postcss: CKEditorStyles.getPostCssConfig({
        themeImporter: {
            themePath: require.resolve("@ckeditor/ckeditor5-theme-lark")
        },
        minify: true
    }),
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Vue CLI would normally use its own loader to load .svg files. The icons used by
      // CKEditor should be loaded using raw-loader instead.
      config.module.rules.push({
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: ["file-loader","raw-loader"]
      })
    }
}

I don't know if the config is correct, I follow the following guides to interact with webpack from nuxt config:
https://nuxtjs.org/faq/webpack-plugins
https://nuxtjs.org/faq/postcss-plugins
https://nuxtjs.org/faq/extend-webpack

[jodator]

@ggirodda please check updated vue guide for loading SVGs:https://github.com/ckeditor/ckeditor5/blob/bc613e17b68e17ac0487af30b75f7566c21f2186/docs/builds/guides/frameworks/vuejs.md#configuring-vueconfigjs (its only availble on master ATM). Does it solve your issue?

[narisada014]

@ggirodda
In nuxt, how did you transplice a plugin library such as HeadingButtonsUI?

[iamKyun]

@ggirodda It works fine! But in my case, this line is still need to modify

const filesRuleIndex = config.module.rules.findIndex(item => {
     return `${item.test}` == "/\\.(png|jpe?g|gif|svg|webp)$/"
})

to :

const filesRuleIndex = config.module.rules.findIndex((item) => {
   // add a 'i' at the end of this line
    return `${item.test}` == '/\\.(png|jpe?g|gif|svg|webp)$/i'
})

[iamKyun]

@ggirodda
In nuxt, how did you transplice a plugin library such as HeadingButtonsUI?

https://nuxtjs.org/api/configuration-build/#transpile

[ggirodda]

@iamKyun ok thank you, I updated my example

[Mgsy]

Note for people using Nuxt.js - I've created a feature request for Nuxt.js integration, so feel free to add 👍 to the first post to bump its popularity and join the discussion.

@kl3sk, did you manage to solve your issue? If not, could you provide some more information about your problem?

[yamenarahman]

In my case I had to edit these lines:

return `${item.test}` === '/\\.(jpg|JPG|jpeg|png|gif|mp3|svg|ttf|woff2|woff|eot)$/gi';

svgRule.exclude.push(path.join(__dirname, '/node_modules/@ckeditor'));

But also still the same error exits

It was not possible to load the plugin.
Cannot read property 'getAttribute' of null.

@Mgsy @ggirodda @iamKyun Any advice?

[jeck5895]

The price for adding plugins and configuring is so much I decided to build the custom editor. And it just WORKS. Here's how to do it

Aside from the issues in this thread, I also ran into Some CKEditor 5 modules are duplicated and Cannot read property 'getAttribute' of null

The custom build reduces my nuxt.config.js by a BUNCH, and makes the project much cleaner. For those who run into SSR failing, check this

I have strong thoughts the repo is not very well compatible with nuxt, so this workaround is imo the most optimal way to go for now...

I have custom build for my project. but the problem is it exceeds babel 500kb limit and won't compile. have you encountered the same?

[Mgsy]

As the discussion seems to be focused around Nuxt.js, I'm closing it and all people interested in Nuxt.js integration, please refer to the Nuxt.js feature request.