vue集成kindeditor富文本的实现示例代码
指令
该指令的作用是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参考
http://kindeditor.net/docs/option.html
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对软件开发网的支持。
相关文章
Kita
2021-05-26
Glory
2021-03-06
Claire
2021-05-21
Chipo
2023-07-21
Jacinthe
2023-07-22
Winona
2023-07-22
Ophelia
2023-07-22
Agnes
2023-07-22
Aurora
2023-07-22
Glory
2023-07-22
Pelagia
2023-07-22
Ianthe
2023-07-22
Nafisa
2023-07-22
Nora
2023-07-28
Rhea
2023-08-08
Kara
2023-08-08
Oria
2023-08-08
Victoria
2023-08-08
Nissa
2023-08-08