溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
指令
該指令的作用是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
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
