vue集成kindeditor富文本的实现示例代码


Posted in Javascript onJune 07, 2019

指令

该指令的作用是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/option.html

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript 读后台cookie代码
Sep 15 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
JavaScript随机数的组合问题案例分析
May 16 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 #Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 #Javascript
ES6小技巧之代替lodash
Jun 07 #Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 #Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 #Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 #Javascript
详解vue项目中实现图片裁剪功能
Jun 07 #Javascript
You might like
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
js date 格式化
2017/02/15 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Python常见异常分类与处理方法
2017/06/04 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python实现Kmeans聚类算法
2020/06/10 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
励志演讲稿大全
2014/08/21 职场文书
国庆节活动总结
2014/08/26 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
cypress测试本地web应用
2022/06/01 Javascript