CKEditor 4 Vue Component

Common errors

• [Vue warn]: Unknown custom element: <ckeditor> - did you register the component correctly?

  cause The CKEditor component was not registered as a global Vue component before the application attempted to render it.
  fix Add `Vue.use(CKEditor);` to your application's main entry file (e.g., `main.js` or `app.js`) before creating your Vue instance.

• TypeError: Cannot read properties of undefined (reading 'config')

  cause This error often indicates that the CKEditor core script (ckeditor.js) is not correctly loaded or accessible, or the component isn't properly initialized.
  fix Verify that `ckeditor.js` (the core CKEditor script) is available in your project. If using a bundler, ensure it's imported or configured correctly. If using the script tag, double-check the path and ensure it loads before the Vue component.

• Error: [CKEDITOR] Error code: editor-incorrect-api

  cause Attempting to use a version of `ckeditor4-vue` (>=2.4.1) that is part of the commercial CKEditor 4 LTS model without a valid license, or with an improperly configured setup.
  fix Obtain a commercial license for CKEditor 4 LTS from CKSource, or downgrade your `ckeditor4-vue` package to version 2.4.0 or below (accepting the associated security risks for an EOL product).

Warnings

• breaking CKEditor 4, the underlying editor for this component, reached its End of Life (EOL) for open-source users on June 30, 2023. Versions of ckeditor4-vue from 2.4.0 and below are open-source but receive no further security updates or critical bug fixes.
  Fix: Upgrade to a commercial CKEditor 4 LTS subscription for continued security updates and support, or migrate to CKEditor 5.
• breaking Versions of ckeditor4-vue above 2.4.0 (including 3.x) are distributed under commercial terms as part of the CKEditor 4 LTS (Long Term Support) model. Using these versions requires adherence to the Extended Support Model license.
  Fix: Obtain a valid commercial license for CKEditor 4 LTS from CKSource, or downgrade to version 2.4.0 or below and accept the security risks.
• gotcha This package is designed for Vue 2.x. It is not compatible with Vue 3.x applications due to its peer dependency on Vue ^2.5.17 and internal Vue 2 specific API usage.
  Fix: For Vue 3 compatibility, consider using the official CKEditor 5 Vue component (e.g., '@ckeditor/ckeditor5-vue') or other Vue 3 native rich text editors.
• gotcha Failing to properly install the component using `Vue.use(CKEditor)` before your Vue application mounts will result in the `<ckeditor>` tag not being recognized.
  Fix: Ensure `Vue.use(CKEditor);` is called at the very beginning of your application's bootstrap, typically after `import Vue from 'vue';` and before `new Vue({...})`.

Install

• npm install ckeditor4-vue npm
• yarn add ckeditor4-vue yarn
• pnpm add ckeditor4-vue pnpm

Imports

• CKEditor
  wrong:

  import { CKEditor } from 'ckeditor4-vue';

  correct:

  import CKEditor from 'ckeditor4-vue';

  The main component is a default export. Incorrectly using named import will result in a runtime error.
• Vue.use
  wrong:

  new Vue().use(CKEditor);

  correct:

  Vue.use(CKEditor);

  The component registers itself as a Vue plugin; it must be installed globally on the `Vue` constructor before app initialization.
• CKEditor global

  <script src="../node_modules/ckeditor4-vue/dist/ckeditor.js"></script>

  For environments without a module bundler, the component can be loaded directly as a script tag, making the `CKEditor` object globally available.

Quickstart

Demonstrates how to install the CKEditor 4 Vue component, register it as a Vue plugin, and use it within a basic Vue instance to display and update rich text content.

import Vue from 'vue';
import CKEditor from 'ckeditor4-vue';

Vue.use( CKEditor );

new Vue({
  el: '#app',
  template: `
    <div id="app">
      <ckeditor :value="editorContent" @input="updateEditorContent"></ckeditor>
    </div>
  `,
  data: {
    editorContent: 'Hello, World!'
  },
  methods: {
    updateEditorContent(event) {
      this.editorContent = event;
      console.log('Editor content updated:', this.editorContent);
    }
  }
});