快捷導(dǎo)航

vue集成kindeditor富文本的實(shí)現(xiàn)示例代碼

更新時(shí)間：2019年06月07日 10:36:19 作者：改改心情

這篇文章主要介紹了vue集成kindeditor富文本的實(shí)現(xiàn)示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

指令

該指令的作用是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

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

Vue分頁組件實(shí)現(xiàn)過程詳解
Web應(yīng)用程序中資源分頁不僅對性能很有幫助，而且從用戶體驗(yàn)的角度來說也是非常有用的。在這篇文章中，將了解如何使用Vue創(chuàng)建動(dòng)態(tài)和可用的分頁組件
2022-12-12
Vue模擬實(shí)現(xiàn)購物車結(jié)算功能
這篇文章主要為大家詳細(xì)介紹了Vue模擬實(shí)現(xiàn)購物車結(jié)算功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue使用babel-polyfill兼容IE解決白屏及語法報(bào)錯(cuò)問題
這篇文章主要介紹了Vue使用babel-polyfill兼容IE解決白屏及語法報(bào)錯(cuò)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼
本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-03-03
Vue通過封裝全局獲取焦點(diǎn)指令
這篇文章主要為大家詳細(xì)介紹了Vue通過封裝全局獲取焦點(diǎn)指令的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下
2023-12-12
vue中項(xiàng)目頁面空白但不報(bào)錯(cuò)產(chǎn)生的原因及分析
這篇文章主要介紹了vue中項(xiàng)目頁面空白但不報(bào)錯(cuò)產(chǎn)生的原因及分析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值)
這篇文章主要介紹了Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue圖片壓縮與批量上傳方式
文章介紹了使用Vue和Element UI的el-upload組件實(shí)現(xiàn)圖片的批量上傳和壓縮功能,前端需引入image-conversion庫并設(shè)置相關(guān)屬性,關(guān)閉自動(dòng)上傳,通過on-change事件校驗(yàn)文件名和大小,并增加一個(gè)提交到服務(wù)器的按鈕
2025-01-01
vue3中的setup()函數(shù)基本使用詳解
在 Vue3 中,setup 函數(shù)是一個(gè)新引入的概念,它代替了之前版本中的 data、computed、methods 等選項(xiàng),用于設(shè)置組件的初始狀態(tài)和邏輯,本文將主要介紹Setup的基本用法和少量原理,感興趣的朋友一起看看吧
2024-02-02
element ui table 增加篩選的方法示例
這篇文章主要介紹了element ui table 增加篩選的方法示例，詳細(xì)的介紹了如何添加規(guī)則內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11