Ckeditor using for Vue.js 2
<script src="https://unpkg.com/vue-ckeditor2"></script>$ npm install vue-ckeditor2 --save
This document applies to v2.0+. If you are looking for older versions, docs are here
import Vue from 'vue';
import VueCkeditor from 'vue-ckeditor2';
Vue.use(VueCkeditor);Then in your component:
<template>
<div>
<vue-ckeditor v-model="content" :config="config" @blur="onBlur($event)" @focus="onFocus($event)" />
</div>
</template>
<script>
export default {
data () {
return {
content: '',
config: {
toolbar: [
[ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript' ]
],
height: 300
}
}
},
methods: {
onBlur (editor) {
console.log(editor)
},
onFocus (editor) {
console.log(editor)
}
}
}
</script>| Name | Type | Description |
|---|---|---|
name |
String |
Name of instance ckedior. Default: editor-1 |
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. |
You can use vue-cli with vue-rollup-boilerplate templates or other vue templates
Thanks to:
- Eduárd Moldován
- Dominique FERET
- comfuture
- 旺旺
- Tony Yip
- Nedyalko Dyakov
- Bryan Miller
- Jeff Omiecinski
- rlfscin
- Renato Souza
MIT © Dang Van Thanh
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent