# CKEditor 4 WYSIWYG editor component for Vue.js v3

![Mayasabha CKEditor 4 Vue 3 Component](https://apoorvpal.in/assets/img/packages/js/ckeditor4-vue3/ckeditor4-vue3.png)

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
<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:

```js
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:

```Vue
<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:

```html
<script src="../node_modules/@mayasabha/ckeditor4-vue3/dist/ckeditor.js"></script>
```

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

![CKEditor 4 screenshot](https://c.cksource.com/a/1/img/npm/ckeditor4.png)

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.