Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dangvanthanh/vue-ckeditor2
CKEditor 4 wrapper by Vue.js
https://github.com/dangvanthanh/vue-ckeditor2
ckeditor vue vue-ckeditor
Last synced: about 2 months ago
JSON representation
CKEditor 4 wrapper by Vue.js
- Host: GitHub
- URL: https://github.com/dangvanthanh/vue-ckeditor2
- Owner: dangvanthanh
- License: mit
- Created: 2015-12-12T15:06:27.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2024-07-01T16:29:44.000Z (3 months ago)
- Last Synced: 2024-07-18T19:47:07.450Z (2 months ago)
- Topics: ckeditor, vue, vue-ckeditor
- Language: Vue
- Homepage: https://vue-ckeditor2.surge.sh/
- Size: 3.14 MB
- Stars: 171
- Watchers: 10
- Forks: 64
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# vue-ckeditor
> Ckeditor using for Vue.js 2
## Requirements
- [Ckeditor](http://ckeditor.com/) >= 4
- [Vue.js](http://vuejs.org/) >= 2
## Install
### CDN
```html
```
### 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
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);
}
}
};
```
### 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 [contributers](./CONTRIBUTING.md)
## License
MIT © [Dang Van Thanh](http://dangthanh.org)