https://github.com/mayasabha/ckeditor4-vue3
CKEditor 4 Component for Vue 3
https://github.com/mayasabha/ckeditor4-vue3
ckeditor ckeditor4 components vue-components vue3 vuejs vuejs-components vuejs3 wysiwyg wysiwyg-editor wysiwyg-html-editor wysiwyg-js-editor
Last synced: 15 days ago
JSON representation
CKEditor 4 Component for Vue 3
- Host: GitHub
- URL: https://github.com/mayasabha/ckeditor4-vue3
- Owner: mayasabha
- License: other
- Created: 2022-02-11T15:34:05.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-11-18T04:43:39.000Z (over 1 year ago)
- Last Synced: 2025-09-26T05:30:01.523Z (9 months ago)
- Topics: ckeditor, ckeditor4, components, vue-components, vue3, vuejs, vuejs-components, vuejs3, wysiwyg, wysiwyg-editor, wysiwyg-html-editor, wysiwyg-js-editor
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@mayasabha/ckeditor4-vue3
- Size: 1.87 MB
- Stars: 27
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
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:
```bash
npm install @mayasabha/ckeditor4-vue3
```
### Use in Single File Components
```Vue
import { component as ckeditor } from '@mayasabha/ckeditor4-vue3'
```
### Use as a Global Plugin
Call the `Vue.use()` method to register `CKEditor` as a global plugin for Vue:
```js
import Vue from 'vue';
import CKEditor from '@mayasabha/ckeditor4-vue3';
const app = Vue.createApp({});
app.use( CKEditor );
new Vue( {
// ... options
} )
```
And use the `` component in your template:
```Vue
```
### Use via Direct `` Tag
Instead of using ES6 imports, the component can also be added via a direct script include:
```html
<script src="../node_modules/@mayasabha/ckeditor4-vue3/dist/ckeditor.js">
```
and used in the same way as with ES6 imports:
```js
app.use( CKEditor );
```
Refer to the official [CKEditor 4 Vue component documentation](http://ckeditor.com/docs/ckeditor4/latest/guide/dev_vue.html#basic-usage) for more information about the installation process.
## Documentation and examples
See the [CKEditor 4 WYSIWYG Editor Vue Integration](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_vue.html) article in the [CKEditor 4 documentation](https://ckeditor.com/docs/ckeditor4/latest).
You can also check out the [CKEditor 4 WYSIWYG Editor Vue Integration samples](https://ckeditor.com/docs/ckeditor4/latest/examples/vue.html) in [CKEditor 4 Examples](https://ckeditor.com/docs/ckeditor4/latest/examples/).
## Browser support
The CKEditor 4 Vue component works with all the [supported browsers](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_browsers.html#officially-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:
```js
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](http://www.gnu.org/licenses/gpl.html),
* [GNU Lesser General Public License Version 2.1 or later](http://www.gnu.org/licenses/lgpl.html),
* [Mozilla Public License Version 1.1 or later (the "MPL")](http://www.mozilla.org/MPL/MPL-1.1.html).
For full details about the license, please check the `LICENSE.md` file.