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项目实现主题切换的多种方法
Nov 26 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vuex的使用步骤
Jan 06 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
vue 实现上传组件
May 31 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php集成动态口令认证
2016/07/21 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
简单的php购物车代码
2020/06/05 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
python中的全局变量用法分析
2015/06/09 Python
深入理解Python中的super()方法
2017/11/20 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
pandas实现选取特定索引的行
2018/04/20 Python
python实现杨氏矩阵查找
2019/03/02 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
python yield和Generator函数用法详解
2020/02/10 Python
pandas实现导出数据的四种方式
2020/12/13 Python
C++是不是类型安全的
2014/02/18 面试题
百度软件工程师职位
2013/02/14 面试题
维修工先进事迹
2014/05/29 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
java泛型通配符详解
2021/07/25 Java/Android
vue+echarts实现多条折线图
2022/03/21 Vue.js
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS