How to import/use ckeditor 5 from online-builder in Vue 3?

This post is maybe longer but its super easy 5min done.

This example is for full document type of ckeditor 5, decoupled-document is almost everything You need, just it lacks image-resize, do add it go to https://ckeditor.com/ckeditor-5/online-builder/ click it all way and add image-resize or all other fun stuff, and download zip file, do not forget to pick same type in step 1 as one you will use/install.

Install (like in classic guide - https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html)

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-decoupled-document

In main.js

import CKEditor from '@ckeditor/ckeditor5-vue';

createApp(App)
  .use(router)
  .use(CKEditor)
  .mount("#app");

In your component

import DocumentEditor from '@ckeditor/ckeditor5-build-decoupled-document';

Now add config to data, You can find this config generated inside files you got from online-builder generator its copy/paste so do not freak out :) . You can find it in /sample/index.html, if you do not set it its possible Youll see an warning about missing "toolbar" options. Do not copy what you see below, use your custom generated config, its only for illustration :

data: function () {
  return {
    editor: DocumentEditor,
    editorData: '<p>Content of the editor.</p>',
    editorConfig: {
      ckfinder: {
        uploadUrl: 'http://www.mypage.com/api/uploadckeditor'
      },
      toolbar: {
        items: [
          'heading',
          '|',
          'fontSize',
          'fontFamily',
          'fontColor',
          'fontBackgroundColor',
          'imageInsert',
          '|',
          'bold',
          'italic',
          'underline',
          'strikethrough',
          'highlight',
          'removeFormat',
          '|',
          'alignment',
          '|',
          'numberedList',
          'bulletedList',
          '|',
          'indent',
          'outdent',
          '|',
          'todoList',
          'link',
          'blockQuote',
          'imageUpload',
          'insertTable',
          'mediaEmbed',
          '|',
          'undo',
          'redo',
          'CKFinder'
        ]
      },
      language: 'cs',
      image: {
        toolbar: [
          'imageTextAlternative',
          'imageStyle:full',
          'imageStyle:side',
          'linkImage'
        ]
      },
      table: {
        contentToolbar: [
          'tableColumn',
          'tableRow',
          'mergeTableCells'
        ]
      },
      licenseKey: ''
    }

Now use it in component html

<ckeditor :editor="editor" @ready="onReady" v-model="editorData" :config="editorConfig"></ckeditor>

Decoupled component ckeditor package need @ready="onReady" othervise it will not initialize (classic do not need this)

here is method :

methods: {
  onReady( editor )  {
    // Insert the toolbar before the editable area.
    editor.ui.getEditableElement().parentElement.insertBefore(
            editor.ui.view.toolbar.element,
            editor.ui.getEditableElement()
    );
  },

Ok now You have almost everything done just last magic thing to do . In files you downloaded go to /build folder and COPY all the files into "node_modules@ckeditor\ckeditor5-build-decoupled-document\build" and override initial decoupled-document. This is key thing to do, even thought it sounds pretty horrible.

Bonus : I wanted to have also image upload so added to config

  **ckfinder: {
    uploadUrl: 'http://mypage/api/uploadckeditor'
  },**

Here is php side implementation its just basic one wit no error handling

$uploaddir = '../www/adminUpload/';
$uploadfile = $uploaddir . basename($_FILES['upload']['name']);

if (move_uploaded_file($_FILES['upload']['tmp_name'], $uploadfile)) {
    //$this->sendJson(array("message"=>"sucess"));
} else {
    //$this->sendJson(array("message"=>"failed"));
}

$returnArray = array();
$returnArray["uploaded"] = true;
$returnArray["url"] = "http://www.mypage.com/adminUpload/".$_FILES['upload']['name'];
header('Content-type: application/json');
$this->sendJson($returnArray);
$this->terminate();

For last 2 rows they are Nette php framework specific, just send out $returnArray as json response.

Here is how I integrated CKEDITOR with Vue3.js

Install required packages

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

main.ts

import CKEditor from '@ckeditor/ckeditor5-vue'
const app = createApp(App)
app.use( CKEditor ).mount('#app')

Then in your component where you wnat to use ckeditor

<template>
     <ckeditor :editor="editor" v-model="data.description"></ckeditor>
</template>
<script>
import {onMounted, reactive, computed} from "vue"
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

export default{
     name:'Add',
     setup() {
          //....
          const data = reactive({
           description: '',
          })

         return {
             data,
             editor: ClassicEditor
         }
     }
}
</script>
enter code here

I faced a problem image uploading inside ckeditor5-build-classic, for image uploading I'm using Node.js server and S3, here is how returned the json response from Node.js server, uploaded flag is more important:

 exports.upload_file_ckeditor = async(req, res) => {

     let obj = {
                 "uploaded" : true,
                 "url" : 'http://example.com/upload/xyz.png'
     }

     return  res.send(obj)

}