Nonlinear Performance Magnification
    Wondering what’s next for npm?Check out our public roadmap! »


    1.3.1 • Public • Published

    CKEditor 4 WYSIWYG editor component for Vue.js Tweet

    npm version GitHub tag

    Build Status Dependency Status devDependency Status

    Join newsletter Follow Twitter

    The official CKEditor 4 WYSIWYG editor component for Vue.js.

    We are looking forward to your feedback! You can report any issues, ideas or feature requests on the integration issues page.

    CKEditor 4 screenshot

    Installation and usage

    To install the CKEditor 4 component for Vue.js from npm, simply run:

    npm install ckeditor4-vue

    Then use it by calling the Vue.use() method:

    import Vue from 'vue';
    import CKEditor from 'ckeditor4-vue';
    Vue.use( CKEditor );
    new Vue( {
    	// ... options
    } )

    And use the <ckeditor /> component in your template:

    	<div id="app">
    		<ckeditor value="Hello, World!"></ckeditor>

    Instead of using ES6 imports, the component can also be added via a direct script include:

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

    and used in the same way as with ES6 imports:

    Vue.use( CKEditor );

    Refer to the official CKEditor 4 Vue component documentation for more information about the installation process.

    Documentation and examples

    See the CKEditor 4 WYSIWYG Editor Vue Integration article in the CKEditor 4 documentation.

    You can also check out the CKEditor 4 WYSIWYG Editor Vue Integration samples in CKEditor 4 Examples.

    Browser support

    The CKEditor 4 Vue component works with all the supported browsers except for Internet Explorer.

    To enable Internet Explorer 11 support, instead of the standard import you need to import a specific dist/legacy.js file containing all required polyfills:

    import CKEditor from 'ckeditor4-vue/dist/legacy.js'

    Note: Even though CKEditor 4 supports older Internet Explorer versions including IE8, IE9 and IE10, the Vue integration is only supported in the latest Internet Explorer 11.


    After cloning this repository, install necessary dependencies:

    npm install

    Executing tests


    npm run test

    If you are going to change the source files (ones located in the src/ directory), remember about rebuilding the package. You can use npm run develop in order to do it automatically.

    Building the package

    Build a minified version of the package that is ready to be published:

    npm run build


    Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.

    Licensed under the terms of any of the following licenses at your choice:

    For full details about the license, please check the file.


    npm i ckeditor4-vue

    DownloadsWeekly Downloads





    (GPL-2.0-or-later OR LGPL-2.1-or-later OR MPL-1.1-or-later)

    Unpacked Size

    267 kB

    Total Files


    Last publish


    • avatar