vue集成kindeditor富文本的實(shí)現(xiàn)示例代碼
指令
該指令的作用是dom渲染后觸發(fā),因?yàn)榉莢ue的插件有的是dom必須存在的情況下才可以執(zhí)行
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
// 默認(rèn)參數(shù)
var options = {
uploadJson: 'upload/image',
width: '100%',
afterChange () {
_this.localValue = this.html()
}
}
// 調(diào)用外部參數(shù)
if (_this.options) {
for(var i in _this.options){
options[i] = _this.options[i]
}
}
KindEditor.create(_this.$refs.kindeditor,options);
},
// 設(shè)置初始值
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
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
- VueQuillEditor富文本上傳圖片(非base64)
- vue通過(guò)v-html指令渲染的富文本無(wú)法修改樣式的解決方案
- Vue使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務(wù)、清除復(fù)制粘貼樣式等)
- Spring+Vue整合UEditor富文本實(shí)現(xiàn)圖片附件上傳的方法
- vue2.0 實(shí)現(xiàn)富文本編輯器功能
- 富文本編輯器vue2-editor實(shí)現(xiàn)全屏功能
- 詳解vue中使用vue-quill-editor富文本小結(jié)(圖片上傳)
- 詳解Vue基于vue-quill-editor富文本編輯器使用心得
- 如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過(guò)濾器
- 輕量級(jí)富文本編輯器wangEditor結(jié)合vue使用方法示例
- 如何在vue中使用kindeditor富文本編輯器
相關(guān)文章
Vue分頁(yè)組件實(shí)現(xiàn)過(guò)程詳解
Web應(yīng)用程序中資源分頁(yè)不僅對(duì)性能很有幫助,而且從用戶體驗(yàn)的角度來(lái)說(shuō)也是非常有用的。在這篇文章中,將了解如何使用Vue創(chuàng)建動(dòng)態(tài)和可用的分頁(yè)組件2022-12-12
Vue模擬實(shí)現(xiàn)購(gòu)物車結(jié)算功能
這篇文章主要為大家詳細(xì)介紹了Vue模擬實(shí)現(xiàn)購(gòu)物車結(jié)算功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
Vue使用babel-polyfill兼容IE解決白屏及語(yǔ)法報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了Vue使用babel-polyfill兼容IE解決白屏及語(yǔ)法報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼
本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03
vue中項(xiàng)目頁(yè)面空白但不報(bào)錯(cuò)產(chǎn)生的原因及分析
這篇文章主要介紹了vue中項(xiàng)目頁(yè)面空白但不報(bào)錯(cuò)產(chǎn)生的原因及分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05
Nuxt 嵌套路由nuxt-child組件用法(父子頁(yè)面組件的傳值)
這篇文章主要介紹了Nuxt 嵌套路由nuxt-child組件用法(父子頁(yè)面組件的傳值),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11

