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编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
vue实现在data里引入相对路径
Jun 05 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 中的类
2006/10/09 PHP
简单的用PHP编写的导航条程序
2006/10/09 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
js实现电灯开关效果
2021/01/19 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
python中list常用操作实例详解
2015/06/03 Python
Python上下文管理器和with块详解
2017/09/09 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
eclipse创建python项目步骤详解
2019/05/10 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
职业女性的职业规划
2014/03/04 职场文书
趣味运动会广播稿
2014/09/13 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
自主招生自荐信范文
2015/03/04 职场文书
数学备课组工作总结
2015/08/12 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书