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的mixin策略
Nov 19 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
在类Unix系统上开始Python3编程入门
2015/08/20 Python
python实现外卖信息管理系统
2018/01/11 Python
django ajax json的实例代码
2018/05/29 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
Python 3 判断2个字典相同
2019/08/06 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
UNIX命令速查表
2012/03/10 面试题
小学生差生评语
2014/12/29 职场文书
元旦主持词开场白
2015/05/29 职场文书
同事离别感言
2015/08/04 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python