vue中使用kindeditor编辑器_vue集成kindeditor富文本

指令

该指令的作用是dom渲染后触发，因为非vue的插件有的是dom必须存在的情况下才可以执行

Vue.directive('loaded-callback', {

inserted: function (el, binding, vnode) {

binding.value(el, binding, vnode)

}

})

安装kindeditor

npm install kindeditor

kindeditor组件

import '../../../../../node_modules/kindeditor/kindeditor-all.js'

import '../../../../../node_modules/kindeditor/lang/zh-CN.js'

import '../../../../../node_modules/kindeditor/themes/default/default.css'

export default {

name: 'kindeditor',

props: ['options', 'value'],

data () {

return {

localValue: ''

}

},

watch: {

localValue: 'updateValue',

value: 'setDefault'

},

created () {

this.setDefault()

},

methods: {

initKindeditor () {

var _this = this

// 默认参数

var options = {

uploadJson: 'upload/image',

width: '100%',

afterChange () {

_this.localValue = this.html()

}

}

// 调用外部参数

if (_this.options) {

for(var i in _this.options){

options[i] = _this.options[i]

}

}

KindEditor.create(_this.$refs.kindeditor,options);

},

// 设置初始值

setDefault () {

this.localValue = this.value

},

// 修改父件的值

updateValue () {

this.$emit('input',this.localValue)

}

}

}

用法

options参考