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通過v-html指令渲染的富文本無法修改樣式的解決方案
- 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、微信小程序中的過濾器
- 輕量級(jí)富文本編輯器wangEditor結(jié)合vue使用方法示例
- 如何在vue中使用kindeditor富文本編輯器
相關(guān)文章
vue原理Compile從新建實(shí)例到結(jié)束流程源碼
這篇文章主要為大家介紹了vue原理Compile從新建實(shí)例到結(jié)束流程源碼,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07vue中使用loadsh的debounce防抖函數(shù)問題
這篇文章主要介紹了vue中使用loadsh的debounce防抖函數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11Vue.js 2.0 移動(dòng)端拍照壓縮圖片上傳預(yù)覽功能
這篇文章主要介紹了Vue.js 2.0 移動(dòng)端拍照壓縮圖片上傳預(yù)覽功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03vite創(chuàng)建一個(gè)標(biāo)準(zhǔn)vue3+ts+pinia項(xiàng)目
本文主要介紹了vite創(chuàng)建一個(gè)標(biāo)準(zhǔn)vue3+ts+pinia項(xiàng)目,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05