@mayasabha/ckeditor4-vue3
v1.0.9
Published
Vue.js 3+ component for CKEditor 4 - the best browser-based rich text editor. Developed and maintained by Mayasabha.
Downloads
8,006
Maintainers
Readme
CKEditor 4 WYSIWYG editor component for Vue.js v3
The CKEditor 4 WYSIWYG editor component for Vue.js v3.
Installation and Usage
To install the CKEditor 4 component for Vue.js from npm, simply run:
npm install @mayasabha/ckeditor4-vue3
Use in Single File Components
<script setup>
import { component as ckeditor } from '@mayasabha/ckeditor4-vue3'
</script>
<template>
<ckeditor></ckeditor>
</template>
Use as a Global Plugin
Call the Vue.use()
method to register CKEditor
as a global plugin for Vue:
import Vue from 'vue';
import CKEditor from '@mayasabha/ckeditor4-vue3';
const app = Vue.createApp({});
app.use( CKEditor );
new Vue( {
// ... options
} )
And use the <ckeditor />
component in your template:
<template>
<div id="app">
<ckeditor value="Hello, World!"></ckeditor>
</div>
</template>
Use via Direct <script>
Tag
Instead of using ES6 imports, the component can also be added via a direct script include:
<script src="../node_modules/@mayasabha/ckeditor4-vue3/dist/ckeditor.js"></script>
and used in the same way as with ES6 imports:
app.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 '@mayasabha/ckeditor4-vue3/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.
Contributing
After cloning this repository, install necessary dependencies:
npm install
Executing tests
Run:
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
License
Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
Licensed under the terms of any of the following licenses at your choice:
- GNU General Public License Version 2 or later,
- GNU Lesser General Public License Version 2.1 or later,
- Mozilla Public License Version 1.1 or later (the "MPL").
For full details about the license, please check the LICENSE.md
file.