Registry / web-framework / ckeditor4-vue

ckeditor4-vue

library3.2.1jsnpmunverified

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.

web-framework

npm install ckeditor4-vue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · CKEDITOR4-VUE

ckeditor4-vue

web-frameworkjavascriptv3.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

CKEditor

✓ import CKEditor from 'ckeditor4-vue';

✗ import { CKEditor } from 'ckeditor4-vue';

The main component is a default export. Incorrectly using named import will result in a runtime error.

Vue.use

✓ Vue.use(CKEditor);

✗ new 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.

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); } } });

Debug

Known issues

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

affects: <=2.4.0

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

affects: >=2.4.1

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

affects: >=1.0.0

gotchaFailing 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({...})`.

affects: >=1.0.0

Errors

Common errors & fixes

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

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')

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

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

Upgrade

Version history

3.2.1latest on npm

Audit

Dependencies

vuerequiredPeer dependency for the Vue.js framework, specifically targeting Vue 2.x.

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ckeditor/ckeditor4-vue ↗

packagehttps://www.npmjs.com/package/ckeditor4-vue ↗

homepagehttps://ckeditor.com/ ↗