{"id":10631,"library":"ckeditor4-vue","title":"CKEditor 4 Vue Component","description":"ckeditor4-vue provides an official Vue.js 2 component for integrating the CKEditor 4 WYSIWYG editor into web applications. As of version 3.x (including the current 3.2.1), this package is part of the commercial CKEditor 4 LTS (Long Term Support) offering. The underlying CKEditor 4 editor reached its End of Life (EOL) for open-source users on June 30, 2023. Open-source versions of this Vue component (2.4.0 and below) no longer receive security updates or bug fixes, posing significant risks. The commercial LTS model extends security updates and critical bug fixes for CKEditor 4 until December 2028. This package simplifies the integration of CKEditor 4 into Vue 2 projects by providing a declarative component, differentiating it from manual integration methods.","status":"maintenance","version":"3.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/ckeditor/ckeditor4-vue","tags":["javascript","wysiwyg","rich text","editor","rte","html","contentEditable","editing","vue"],"install":[{"cmd":"npm install ckeditor4-vue","lang":"bash","label":"npm"},{"cmd":"yarn add ckeditor4-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add ckeditor4-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the Vue.js framework, specifically targeting Vue 2.x.","package":"vue","optional":false}],"imports":[{"note":"The main component is a default export. Incorrectly using named import will result in a runtime error.","wrong":"import { CKEditor } from 'ckeditor4-vue';","symbol":"CKEditor","correct":"import CKEditor from 'ckeditor4-vue';"},{"note":"The component registers itself as a Vue plugin; it must be installed globally on the `Vue` constructor before app initialization.","wrong":"new Vue().use(CKEditor);","symbol":"Vue.use","correct":"Vue.use(CKEditor);"},{"note":"For environments without a module bundler, the component can be loaded directly as a script tag, making the `CKEditor` object globally available.","symbol":"CKEditor global","correct":"<script src=\"../node_modules/ckeditor4-vue/dist/ckeditor.js\"></script>"}],"quickstart":{"code":"import Vue from 'vue';\nimport CKEditor from 'ckeditor4-vue';\n\nVue.use( CKEditor );\n\nnew Vue({\n  el: '#app',\n  template: `\n    <div id=\"app\">\n      <ckeditor :value=\"editorContent\" @input=\"updateEditorContent\"></ckeditor>\n    </div>\n  `,\n  data: {\n    editorContent: 'Hello, World!'\n  },\n  methods: {\n    updateEditorContent(event) {\n      this.editorContent = event;\n      console.log('Editor content updated:', this.editorContent);\n    }\n  }\n});","lang":"javascript","description":"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."},"warnings":[{"fix":"Upgrade to a commercial CKEditor 4 LTS subscription for continued security updates and support, or migrate to CKEditor 5.","message":"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.","severity":"breaking","affected_versions":"<=2.4.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=2.4.1"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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({...})`.","message":"Failing to properly install the component using `Vue.use(CKEditor)` before your Vue application mounts will result in the `<ckeditor>` tag not being recognized.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `Vue.use(CKEditor);` to your application's main entry file (e.g., `main.js` or `app.js`) before creating your Vue instance.","cause":"The CKEditor component was not registered as a global Vue component before the application attempted to render it.","error":"[Vue warn]: Unknown custom element: <ckeditor> - did you register the component correctly?"},{"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.","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.","error":"TypeError: Cannot read properties of undefined (reading 'config')"},{"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).","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.","error":"Error: [CKEDITOR] Error code: editor-incorrect-api"}],"ecosystem":"npm"}