vue-ckeditor2
Version:
Ckeditor 4 using with Vue.js
139 lines (110 loc) • 5.21 kB
Markdown
# vue-ckeditor
> Ckeditor using for Vue.js 2
## Requirements
- [Ckeditor](http://ckeditor.com/) >= 4
- [Vue.js](http://vuejs.org/) >= 2
## Install
### CDN
```html
<script src="https://unpkg.com/vue-ckeditor2"></script>
```
### NPM
```
$ npm install vue-ckeditor2 --save
```
## Usage
> This document applies to v2.0+. If you are looking for older versions, docs are [here](https://github.com/dangvanthanh/vue-ckeditor2/wiki/Getting-Started)
### Component
Then in your component:
```vue
<template>
<div>
<vue-ckeditor
v-model="content"
:config="config"
@blur="onBlur($event)"
@focus="onFocus($event)"
@contentDom="onContentDom($event)"
@dialogDefinition="onDialogDefinition($event)"
@fileUploadRequest="onFileUploadRequest($event)"
@fileUploadResponse="onFileUploadResponse($event)" />
</div>
</template>
<script>
import VueCkeditor from 'vue-ckeditor2';
export default {
components: { VueCkeditor },
data() {
return {
content: '',
config: {
toolbar: [
['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript']
],
height: 300
}
};
},
methods: {
onBlur(evt) {
console.log(evt);
},
onFocus(evt) {
console.log(evt);
},
onContentDom(evt) {
console.log(evt);
},
onDialogDefinition(evt) {
console.log(evt);
},
onFileUploadRequest(evt) {
console.log(evt);
},
onFileUploadResponse(evt) {
console.log(evt);
}
}
};
</script>
```
### Props
| Name | Type | Description |
| ----------------------- | ---------- | ---------------------------------------------------------------------------- |
| `name` | `String` | Name of instance ckedior. **Default: editor- ** |
| `id` | `String` | Id of instance ckedior. **Default: editor-1** |
| `types` | `String` | Types of ckedior. **Default: classic** |
| `config` | `Object` | All configuration of ckeditor. **Default: {}** |
| `instanceReadyCallback` | `Function` | Optional function that will be attached to CKEditor instanceReady event. |
| `readOnlyMode` | `Boolean` | Option setReadOnly editor initializes in the proper mode. **Default: false** |
### Events
| Name | Description |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `blur` | Fired when the editor instance loses the input focus. |
| `focus` | Fired when the editor instance receives the input focus. |
| `contentDom` | Event fired when the editor content (its DOM structure) is ready |
| `dialogDefinition` | Event fired when a dialog definition is about to be used to create a dialog into an editor instance |
| `fileUploadRequest` | Event fired when the [file loader](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_fileTools_fileLoader.html) should send XHR |
| `fileUploadResponse` | Event fired when the [file loader](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_fileTools_fileLoader.html) response is received and needs to be parsed |
## Build Setup
You can use [vue-cli](https://github.com/vuejs/vue-cli) with [vue-rollup-boilerplate templates](https://github.com/dangvanthanh/vue-rollup-boilerplate) or [other vue templates](https://github.com/vuejs-templates)
## Created By
- [Dang Van Thanh](https://github.com/dangvanthanh)
Thanks to:
- [Eduárd Moldován](https://github.com/edimoldovan)
- [Dominique FERET](https://github.com/DominiqueFERET)
- [comfuture](https://github.com/comfuture)
- [旺旺](https://github.com/chengpan168)
- [Tony Yip](https://github.com/tonyhhyip)
- [Nedyalko Dyakov](https://github.com/ndyakov)
- [Bryan Miller](https://github.com/bryanjamesmiller)
- [Jeff Omiecinski](https://github.com/omiecinski)
- [rlfscin](https://github.com/rlfscin)
- [Renato Souza](https://github.com/renatosistemasvc)
- [Fernando Morgenstern](https://github.com/fernandomm)
- [Christoph-Wagner](https://github.com/Christoph-Wagner)
- [Patrick Davey](https://github.com/patrickdavey)
- [Michali Sarris](https://github.com/msarris)
## License
MIT © [Dang Van Thanh](http://dangthanh.org)