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/op...