ckeditor5 Nuxt.js integration

📝 Provide a description of the new feature

Currently, integrating CKEditor 5 with Nuxt.js causes some issues. It will be nice to check how we can improve it.

A list of related issues which might be useful:

https://github.com/ckeditor/ckeditor5-vue/issues/71
https://github.com/ckeditor/ckeditor5-vue/issues/8
https://github.com/ckeditor/ckeditor5-vue/issues/74
https://github.com/ckeditor/ckeditor5-vue/issues/24

If you'd like to see this feature implemented, add a 👍 reaction to this post.

Jan 14 '20 11:01 Mgsy

This is a huge problem. It kind a stops my development now. I need to develop multiple custom plugins. At this stage we're thinking about migrating to other editor instead. So hope there will be some fix soon.

Jan 14 '20 12:01 edgarsn

For everyone struggling with integrating CKEditor5 and Nuxt, you are most likely to run into two major problems:

Make Nuxt initialize/render CKEditor5 on client side
Load additional plugins for CKEditor5

To address problem 1, there is an easy workaround, which you can find here. Probably, you will also need to set mode: 'spa' in nuxt.config.js.

To address problem 2, you will need to add a custom Webpack config to your nuxt.config.js file, which you can find here.

Note: when you build Nuxt project as a static website using npm run generate, you may get index.html which lacks two imports of javascript files from _nuxt folder, and also you will need to add a period in file paths in script and link tags, for example: src="./_nuxt/d6170a734de3a0201298.js" instead of src="/_nuxt/d6170a734de3a0201298.js"

Jan 31 '20 09:01 FilipTokarski

For me, currently, the best solution to use nuxt with SSR was to make a build outside a nuxt project.

I downloaded https://github.com/ckeditor/ckeditor5-build-classic, modifying src/ckeditor.js file to include plugins what I need, then modified webpack.config.js build path to my nuxt.js static folder. So when I execute npm run build in my custom ckeditor build, it makes a builded ckeditor file in my nuxt project. Then I just link to this script in my nuxt.config.js.

Definitely not the best way and still waiting official ckeditor nuxt.js support.

Jan 31 '20 13:01 edgarsn

Tried all day to add CKeditor 5 to my nuxt project, without result. Would love if I could simply add ckeditor to my plugin. In the meantime, does anyone know the best solution to add this to my project? The writers on my team want to have as much rich text tools as possible on the website, so I cannot only use the classic build.

Apr 01 '20 14:04 SThomassen

@SThomassen look at my comment. That's the way I did it, but few more days later our team just migrated away from CK5 to other editor completely. I didn't want to create and maintain separate git repo which contains our custom build, just to be able to use CK in nuxt project. We just found other editor which works fine with nuxt and fits our needs.

Apr 01 '20 15:04 edgarsn

@edgarsn can you explain the way you add the editor in a component/page? I followed your steps (modified the classic build webpack config and ckeditor.js), produced the necessary build, which I then declared on nuxt.config.js as { src: '~plugins/custom_ckeditor', ssr: false }, but I can't get it to be added in page.

Apr 05 '20 14:04 teotsi

@teotsi You must import it in your nuxt.config.js head - script section.

export default {  
    head: {
        script: [
            {src: '/ckeditor.js'},
        ],
    }
}

after that in your vue file you use it straightaway without any require() or import(). It's imported globally as es5 script.

Apr 07 '20 06:04 edgarsn

Is it NUXT integration moving to any direction? or it's just Github issue and nothing else?

May 01 '20 20:05 paulvonber

After a lot of tries I was able to use this with Nuxt.js, below the code I used to use implement the standard builds.

<template>
  <div>
    <ckeditor :editor="editor" :config="editorConfig" v-model="editorData"></ckeditor>
  </div>
</template>

<script>
  if (process.client) {
    require('@ckeditor/ckeditor5-build-classic/build/translations/pt-br')
    ClassicEditor = require('@ckeditor/ckeditor5-build-classic')
    CKEditor = require('@ckeditor/ckeditor5-vue')
  } else {
    CKEditor = { component : {template:'<div></div>'}}
  }

  export default {
    components: {
      ckeditor: CKEditor.component
    },
    data() {
      return {
        editorData: "",
        editor: ClassicEditor,
        editorConfig: {
          language: 'pt-br',
          toolbar:{
            items: [
              'heading',
              '|',
              'bold',
              'italic',
              //...
            ]
          },
          image: {
            toolbar: ['imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:side'],
            styles: [
              'full',
              'side',
              'alignLeft',
              'alignRight',
              'alignCenter'
            ]
          },
          //...
        },
      }
    },
  }
</script>

I am not able to build from source, but to add new plugins I make a new build with the online builder and so I save it in my components directory and import it instead the standard build.

<script>
  if (process.client) {
    require('@ckeditor/ckeditor5-build-classic/build/translations/pt-br')
    ClassicEditor = require('@/components/RichText/ckeditor5/build/ckeditor')
    CKEditor = require('@ckeditor/ckeditor5-vue')
  } else {
    CKEditor = { component : {template:'<div></div>'}}
  }
//...
</script>

Not the perfect way, but until was released a module for Nuxt.js, this solved my problem. Hope it help someone.

May 09 '20 13:05 Trixpua

@Trixpua do you have a full implementation example in code?

Jun 08 '20 13:06 chkb

Hello @chkb, you can check a example in this codesandbox

Jun 08 '20 23:06 Trixpua

Hello @chkb, you can check a example in this codesandbox

Hello @Trixpua

Ive got your version to work local.

But if I add the Collaboration Feature I get always the error "Cannot set property 'container' of undefined" for the presenceList .

This is the Only thing missing i think hopefully.

I hope you can help somehow <div> <ckeditor :editor="editor" :config="editorConfig" v-model="editorData" v-if="isLayoutReady" @ready="onEditorReady"></ckeditor> <div ref="presenceListElement" class="presence"></div> </div>

` mounted() {

	this.presenceList.container = this.$refs.presenceListElement;



	this.isLayoutReady = true;
},`

data() { return { isLayoutReady: false, editorData: "", editor: ClassicEditor, editorConfig: { cloudServices: { tokenUrl: 'XXX, uploadUrl: 'XXX/', webSocketUrl: 'XXX' }, collaboration: { channelId: '22222232' }, presenceList: { container: null }, sidebar: { container: null }, toolbar: { items: [ "heading", "|", "bold", "italic" //... ] } } }; },

Jun 24 '20 16:06 nawalnew

There is a CKEditor 5 npm package for nuxt.js. It's quite heavy because it has implemented all free possible plugins but works and there is no need to make any changes to the nuxt config file.

If you need more lighter custom build just follow this article it should help you.

Jul 18 '20 21:07 blowstack

any update about to released of module for Nuxt.js ???

Aug 29 '20 12:08 KamranMaqbool

@KamranMaqbool it's been moved up in the milestone queue. It was in the backlog for a while, but it looks like the team will get their hands on it soon.

@Trixpua's solution works perfectly though even with custom builds, so no need to wait for the official support.

Aug 29 '20 13:08 teotsi

Because of the lack of Nuxt Support we moved to codox.io and integrared it with qiull. Cheaper and just some lines to implement. Hope I could help

Am 29.08.2020 um 15:31 schrieb teotsi [email protected]:

@KamranMaqbool it's been moved up in the milestone queue. It was in the backlog for a while, but it looks like the team will get their hands on it soon.

@Trixpua's solution works perfectly though even with custom builds, so no need to wait for the official support.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

Aug 29 '20 20:08 nawalnew

@nawalnew Quill didn't work for me when trying to use custom plugins. That's the main reason we opted for CKEditor. Hopefully the team will officially support Nuxt soon.

Sep 01 '20 05:09 teotsi

any update i also need this in nuxt, specially adding tables images and inline style . ive manage table and image simple upload, but i'm having problem with inline styles. i need the add inline style instead of classed in the texteditor i used this tutorial

https://blowstack.com/blog/frameworks/create-ckeditor-5-custom-build

Sep 01 '20 07:09 jerickcm

@Trixpua I tried your method that works with extra plugins, but I have question about standard editing mode and restricted editing mode.

I would like to create 2 editors which are running in standard editing mode and restricted editing mode separately. Or create an editor that able to switch the modes.

In the online builder, the standard editing mode and restricted editing mode are conflicting plugins that cannot add together. So I created 2 builds named ckeditor.js and ckeditorRestricted.js for standard editing mode and restricted editing mode using the online builder.

But this is not work, if both ClassicEditor and ClassicEditorRestricted components required, both editor would not appeared.

Any methods could make it work with the editing modes in Nuxt? Thanks.

<template> <container> <h1>This is standard editor</h1> <ckeditor v-model="editorData" :editor="editor" :config="editorConfig" /> <hr> <h1>This is restricted editor</h1> <ckeditor v-model="editorData" :editor="editorRestricted" :config="editorRestrictedConfig" /> </container> </template>

<script> let CKEditor let ClassicEditor let ClassicEditorRestricted if (process.client) { ClassicEditor = require('@/components/RichText/ckeditor5/build/ckeditor') ClassicEditorRestricted = require('@/components/RichText/ckeditor5/build/ckeditorRestricted') CKEditor = require('@ckeditor/ckeditor5-vue') } else { CKEditor = { component: { template: '<div></div>' } } }

export default { components: { ckeditor: CKEditor.component }, data () { return { editorData: '', editor: ClassicEditor, editorConfig: { toolbar: { items: ['restrictedEditingException'] } }, editorRestricted: ClassicEditorRestricted, editorRestrictedConfig: { toolbar: { items: ['restrictedEditing'] } } } } } </script>

Ambrose

Sep 29 '20 15:09 ambrosekwok

Hi folks, I thought I'd post my solution to help people out. I manged to get it working throught the following configuration:

nuxt.config.js, extend the webpack config like so:

build: {
   extend(config, ctx) {
// CKEditor
      config.plugins.push(new CKEditorWebpackPlugin())
      config.module.rules.push({
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: ['raw-loader']
      })
      config.module.rules.push({
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              injectType: 'singletonStyleTag',
              attributes: {
                'data-cke': true
              }
            }
          },
          {
            loader: 'postcss-loader',
            options: styles.getPostCssConfig({
              themeImporter: {
                themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
              },
              minify: true
            })
          }
        ]
      })
   }
}

In your .vue file, import CKEditor as follows

<script>
let CKEditor
let ClassicEditor
if (process.browser) {
  CKEditor = require('@ckeditor/ckeditor5-vue')
  ClassicEditor = require('@ckeditor/ckeditor5-build-classic')
}

export default {
 components: {
   ckeditor: process.browser ? CKEditor.component : null,
 }
}

Finally, in your html (vue) make sure to add client only like so:

<client-only>
    <ckeditor
        :editor="editor"
        v-model="newInstructor.biography"
        :config="editorConfig"
        class="border-bottom text-dark"
   ></ckeditor>
</client-only>

Nov 06 '20 20:11 ahmed-classtra

@ahmed-classtra Your solution doesn't work for me. Receiving many errors. Here is one error from many.

`ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/balloonpanel.css (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/style-loader/dist/cjs.js??ref--13-0!./node_modules/postcss-loader/src??ref--13-1!./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/balloonpanel.css) Module build failed (from ./node_modules/postcss-loader/src/index.js): SyntaxError

(1:1) Unknown word

1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./balloonpanel.css"); 3 | `

Nov 11 '20 14:11 edgarsn

@edgarsn that error does not help me resolve your issue. Please post the whole error log.

Nov 11 '20 16:11 ahmed-classtra

@ahmed-classtra sure, here you go.

Error log

```

ERROR Failed to compile with 35 errors friendly-errors 21:24:13

ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/balloonpanel.css friendly-errors 21:24:13