vue集成kindeditor富文本的实现示例代码
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了vue集成kindeditor富文本的实现示例代码，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化来一起学习学习吧
指令
该指令的作用是dom渲染后触发，因为非vue的插件有的是dom必须存在的情况下才可以执行
Vue.directive('loaded-callback', {
inserted: function (el, binding, vnode) {
binding.value(el, binding, vnode)
}
})
安装kindeditor
npm install kindeditor
kindeditor组件
<template>
<div class="kindeditor">
<textarea class="form-control" ref="kindeditor" v-model="localValue" name="content" v-loaded-callback='initKindeditor'></textarea>
</div>
</template>
<script>
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)
}
}
}
</script>
用法
<kindeditor :options="options" v-model="content"></kindeditor>
options参考
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对狼蚁SEO的支持。