服务器之家

服务器之家 > 正文

Vue中使用wangeditor富文本编辑的问题

时间:2022-01-19 15:14     来源/作者:xk. 依然范特西

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富文本编辑内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://blog.csdn.net/weixin_42211816/article/details/113695777

相关文章

热门资讯

蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整 2021-08-24
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部