Nuxt.js integration #6071

Mgsy · 2020-01-14T11:17:53Z

📝 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:

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

edgarsn · 2020-01-14T12:35:38Z

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.

FilipTokarski · 2020-01-31T09:26:19Z

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"

edgarsn · 2020-01-31T13:09:38Z

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.

SThomassen · 2020-04-01T14:23:57Z

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.

edgarsn · 2020-04-01T15:12:33Z

@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.

teotsi · 2020-04-05T14:23:48Z

@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.

edgarsn · 2020-04-07T06:59:19Z

@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.

paulvonber · 2020-05-01T20:12:36Z

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

Trixpua · 2020-05-09T13:24:51Z

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.

chkb · 2020-06-08T13:06:08Z

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

Trixpua · 2020-06-08T23:31:48Z

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

nawalnew · 2020-06-24T16:22:11Z

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" //... ] } } }; },

blowstack · 2020-07-18T21:23:09Z

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.

KamranMaqbool · 2020-08-29T12:50:54Z

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

teotsi · 2020-08-29T13:31:25Z

@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.

nawalnew · 2020-08-29T20:44:56Z

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 ***@***.***>: @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.

teotsi · 2020-09-01T05:43:59Z

@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.

jerickcm · 2020-09-01T07:06:54Z

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

edgarsn · 2020-11-11T14:28:29Z

@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 | `

ahmed-classtra · 2020-11-11T16:40:51Z

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

edgarsn · 2020-11-11T19:26:50Z

@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