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 相关文章推荐
vuex的数据渲染与修改浅析
Nov 26 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 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
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
Javascript 解疑
2009/11/11 Javascript
jcrop基本参数一览
2013/07/16 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
Python中property属性实例解析
2018/02/10 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
python 二维数组90度旋转的方法
2019/01/28 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
Django实现随机图形验证码的示例
2020/10/15 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
大学生物业管理求职信
2013/10/24 职场文书
客户经理岗位职责
2013/12/08 职场文书
党员入党表决心的话
2014/03/11 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
学雷锋日活动总结
2015/02/06 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
教你一步步实现一个简易promise
2021/11/02 Javascript