vue-ckeditor
Ckeditor using for Vue.js 2
Requirements
Install
CDN
NPM
$ npm install vue-ckeditor2 --save
Usage
This document applies to v2.0+. If you are looking for older versions, docs are here
Component
Then in your component:
<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 should send XHR |
fileUploadResponse |
Event fired when the file loader response is received and needs to be parsed |
Build Setup
You can use vue-cli with vue-rollup-boilerplate templates or other vue templates
Created By
Thanks to:
- Eduárd Moldován
- Dominique FERET
- comfuture
- 旺旺
- Tony Yip
- Nedyalko Dyakov
- Bryan Miller
- Jeff Omiecinski
- rlfscin
- Renato Souza
- Fernando Morgenstern
- Christoph-Wagner
- Patrick Davey
- Michali Sarris
License
MIT © Dang Van Thanh