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下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
Vue Mint UI mt-swipe的使用方式
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 批量生成html,txt文件的实现代码
2013/06/26 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
php实现word转html的方法
2016/01/22 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
Jquery cookie操作代码
2010/03/14 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
Js基础学习资料
2010/11/23 Javascript
javascript打印输出json实例
2013/11/11 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
python实现将文本转换成语音的方法
2015/05/28 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
10个顶级Python实用库推荐
2021/03/04 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
五四演讲稿范文
2014/09/03 职场文书
医院护士工作检讨书
2014/10/26 职场文书
垂直极限观后感
2015/06/08 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS