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 相关文章推荐
自动更新作用
Oct 08 Javascript
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
快速处理vue渲染前的显示问题
Mar 05 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
javascript实现简易的计算器
Jan 17 Javascript
四十九个javascript小知识实用技巧
Nov 20 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
php根据年月获取季度的方法
2014/03/31 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
Python执行时间的计算方法小结
2017/03/17 Python
用Python设计一个经典小游戏
2017/05/15 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
Pygame的程序开始示例代码
2020/05/07 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
Linux机考试题
2015/10/16 面试题
学前教育学生自荐信范文
2013/12/31 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
个人工作表现评语
2014/04/30 职场文书
党员三严三实心得体会
2014/10/13 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL