Vue中使用wangeditor富文本编辑的问题


Posted in Vue.js onFebruary 07, 2021

wangEditor是基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。
在我们实际项目上还是比较频繁应用到的,下面出个案例供大家参考学习…

wangEditor文档:https://www.wangeditor.com/

富文本编辑器截图:

Vue中使用wangeditor富文本编辑的问题
Vue中使用wangeditor富文本编辑的问题
Vue中使用wangeditor富文本编辑的问题

<!--富文本编辑器。http://www.wangeditor.com/
使用示例:
<AppEditor v-model="content"></AppEditor>
-->
<template>
 <article ref="editor" class="AppEditor-root"></article>
</template>
<script>
 const E = require('wangeditor');
 export default {
  name: 'AppEditor',
  model: {
   prop: 'value',
   event: 'update:value',
  },
  props: {
   // value值,v-model绑定
   value: {type: String, default: ''},
   // 菜单选项
   menus: {
    type: Array,
    default(){
     return [
      'bold', // 粗体
      'italic',//斜体
      'underline',//下划线
      'fontSize', // 字号
      'strikeThrough',//删除线
      'image', // 插入图片
      'undo', // 撤销


      // 'fontName', // 字体
      // 'italic', // 斜体
      // 'underline', // 下划线
      // 'strikeThrough', // 删除线
      // 'foreColor', // 文字颜色
      // 'backColor', // 背景颜色
      // 'link', // 插入链接
      // 'list', // 列表
      // 'justify', // 对齐方式
      // 'quote', // 引用
      // 'emoticon', // 表情
      // 'image', // 插入图片
      // 'table', // 表格
      // 'video', // 插入视频
      // 'code', // 插入代码
      // 'undo', // 撤销
      // 'redo', // 重复
     ];
    },
   },
  },
  data(){
   return {
    editor: {}, // 编辑器对象
    _value: '', // 内容备份,用于watch时候判断,只在编辑器输入时改变
   };
  },
  computed: {},
  mounted(){
   this.initEditor();
  },
  watch: {
   value(newValue, oldValue){
    // 编辑器onchange更改的不处理,只处理父组件传来的,防止文字回退bug
    if (newValue != this._value) {
     this.editor.txt.html(newValue);
    }
   },
  },
  methods: {
   initEditor(){
    let editor = new E(this.$refs.editor);
    Object.assign(editor.customConfig, {
     menus: this.menus,
     zIndex: 100,
     height: 200,
     pasteFilterStyle: false,
     onchange: (html) => {
      this._value = html; // 更新 _value
      this.$emit('update:value', html); // 更新 value
     },
     customUploadImg:((file, insert)=> {
      if(this.$utils.isEmpty(file)){
       return;
      }
      const msg = this.$Message.loading({
       content: '亲,图片正在拼命地上传中,请稍等...',
       duration: 0
      });
      var params = new FormData();
      params.append('img', file[0]);
      this.$api.post('/synthesis/crm/picture/pictureUpload',params).then(res => {
       insert(res.data.imgUrl)
       setTimeout(msg, 0);
       this.$Message.success('上传成功');
      })
     }),
     uploadImgHooks:{

      customInsert: function (insertImg, result, editor) {
       insertImg(result.url)
      }
     }
    });


    editor.create();
    editor.txt.html(this.value); // 针对数据异步获取的这里无法立即绑定,在watch判断处理
    this.editor = editor;
   },
  },
 };
</script>
<style scoped lang="scss">
 .AppEditor-root{ border: 1px solid #f0f0f0; height: 400px !important;
  /deep/ .w-e-toolbar{ border: none !important; border-bottom: 1px solid #f0f0f0 !important; background-color: #fff !important;

  }
  /deep/ .w-e-text-container{ height: calc(100% - 43px) !important; border: none !important; z-index:1 !important;
   .w-e-text{ height: 100%; overflow-y: auto !important;}
  }
 }

</style>

到此这篇关于Vue中使用wangeditor富文本编辑的问题的文章就介绍到这了,更多相关wangeditor富文本编辑内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue实现图书管理小案例
Dec 03 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 #Vue.js
vue如何使用rem适配
Feb 06 #Vue.js
如何管理Vue中的缓存页面
Feb 06 #Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 #Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 #Vue.js
vue使用echarts画组织结构图
Feb 06 #Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 #Vue.js
You might like
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP写MySQL数据 实现代码
2009/06/15 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
jQuery使用方法
2017/02/04 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
js中less常用的方法小结
2017/08/09 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
老教师工作总结的自我评价
2013/09/27 职场文书
更夫岗位责任制
2014/02/11 职场文书
申论倡议书范文
2014/05/13 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS