vue集成kindeditor富文本的实现示例代码
程序员文章站
2022-09-02 15:38:54
指令
该指令的作用是dom渲染后触发,因为非vue的插件有的是dom必须存在的情况下才可以执行
vue.directive('loaded-callback...
指令
该指令的作用是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参考
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。
上一篇: 夷陵之战中刘备损失了多少士兵?为何会让蜀汉大伤呢?
下一篇: 基于构造函数的五种继承方法小结