vue使用WangEditor富文本编辑器(批量上传图片到服务器)

小灰灰 2023-07-22 05:55 22阅读 0赞

最近要写一个官网，但是这个官网要写成活的可配置的项目，于是要先写一后台管理系统，用来配置官网的菜单和页面，配置菜单自然是vue+ElementUI表格表单的增删改查，但是配置页面就要有排版、样式等等，所以想到了富文本，查了一下决定使用WangEditor这个富文本编辑器，轻量级方便上手，功能齐全:

**官网：http://www.wangEditor.com  
文档：http://www.kancloud.cn/wangfupeng/wangeditor3/332599  
源码：http://github.com/wangfupeng1988/wangEditor**

首先下载：

npm install wangeditor --save

然后在src文件夹下新建组件文件：  
![在这里插入图片描述][2020040419263436.png]  
然后在父组件中引入使用：  
![在这里插入图片描述][20200404193001953.png]  
接收字段：  
![在这里插入图片描述][20200404193047244.png]  
使用：

<editor-bar v-model="detail1" :isClear="isClear" @change="changeEditor1"></editor-bar>

changeEditor1事件：

changeEditor1 (res) {
      console.log(res)        // 这个res就是实时输入的富文本的内容，打印出来是实时输入的字符串html
    },

这个`editoritem.vue`文件内容如下：

<template lang="html">
      <div class="editor">
        <div ref="toolbar" class="toolbar">
        </div>
        <div ref="editor" class="text">
        </div>
        
      </div>
    </template>
    
    <script>
      import axios from 'axios'
      import E from 'wangeditor'
      export default {
        name: 'editoritem',
        data() {
          return {
            // uploadPath,
            editor: null,
            info_: null
          }
        },
        model: {
          prop: 'value',
          event: 'change'
        },
        props: {
          value: {
            type: String,
            default: ''
          },
          isClear: {
            type: Boolean,
            default: false
          }
        },
        watch: {
          isClear(val) {
            // 触发清除文本域内容
            if (val) {
              this.editor.txt.clear()
              this.info_ = null
            }
          },
          value: function(value) {
            if (value !== this.editor.txt.html()) {
              this.editor.txt.html(this.value)
            }
          }
          //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
        },
        mounted() {
          this.seteditor()
          this.editor.txt.html(this.value)
        },
        methods: {
          getHtml () {
              console.log(this.editor.txt.html())
          },
          seteditor() {
            // http://192.168.2.125:8080/admin/storage/create
            this.editor = new E(this.$refs.toolbar, this.$refs.editor)
            this.editor.customConfig.uploadImgShowBase64 = false // base 64 存储图片，如果这个参数设置为true的话，就不用配置服务器端上传地址
            this.editor.customConfig.showLinkImg = false  //   禁止上传网络图片
            this.editor.customConfig.uploadImgServer = '/api/file/uploadFiles'// 这是服务器端上传图片的接口路径
            this.editor.customConfig.uploadImgHeaders = {'Content-Type': 'multipart/form-data' }// 自定义 header  上传文件格式为file文件，用form-data格式
            this.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名
            this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
            this.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 6张图片
            this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
    
            // 配置菜单
            this.editor.customConfig.menus = [
              'head', // 标题
              'bold', // 粗体
              'fontSize', // 字号
              'fontName', // 字体
              'italic', // 斜体
              'underline', // 下划线
              'strikeThrough', // 删除线
              'foreColor', // 文字颜色
              'backColor', // 背景颜色
              'link', // 插入链接
              'list', // 列表
              'justify', // 对齐方式
              'quote', // 引用
              'emoticon', // 表情
              'image', // 插入图片
              'table', // 表格
              'video', // 插入视频
              'code', // 插入代码
              'undo', // 撤销
              'redo', // 重复
              'fullscreen' // 全屏
            ]
    
            this.editor.customConfig.uploadImgHooks = {
              fail: (xhr, editor, result) => {
                // 插入图片失败回调
                 console.log(xhr, editor,result)
              },
              success: (xhr, editor, result) => {
                // 图片上传成功回调
                console.log(xhr, editor)
              },
              timeout: (xhr, editor) => {
                // 网络超时的回调
                console.log(xhr, editor)
              },
              error: (xhr, editor) => {
                console.log(xhr, editor)
                // 图片上传错误的回调
              }
            }
            // =======================================重点如下：
            // this.editor.customConfig.uploadImgShowBase64 = false 如果这个参数设置true，也就不用下面这些了，
            this.editor.customConfig.customUploadImg = (files, insert) => {
                var formData = new FormData();
                for(var i = 0;i < files.length;i ++) {
                    formData.append("file", files[i], files[i].name);      //  多张图片文件都放进一个form-data，有些小伙伴说这里应该这样写：formData.append("file[" + i + "]", files[i], files[i].name)，后端才能拿到完整的图片数组，其实不然，用这个formData.getAll("file")方法恰好拿到数组，或者也可以forEach获取，有很多种办法。
                }
                axios.post('/api/file/uploadFiles', formData, {     // 上传图片接口
                      headers: {
                        'Content-Type': 'multipart/form-data',
                      },
                }).then(da => {
                      console.log(da)
                      if(da.data.code == 1000){
                            for(var j=0;j<da.data.data.length;j++){
                                insert("http://192.168.0.110:8080" + da.data.data[j].imgUrl);    //  前面这个ip地址是服务器ip，后面的imgUrl是后台返回的图片地址，拼接上就是图片路径
                            }
                      }else{
                            alert(da.data.data.msg);
                            return;
                      }
                })
            };
            // =========================================
            this.editor.customConfig.onchange = (html) => {
              this.info_ = html // 绑定当前逐渐地值
              this.$emit('change', this.info_) // 将内容同步到父组件中
            }
            // 创建富文本编辑器
            this.editor.create()
          }
        }
      }
    </script>
    
    <style lang="css">
      .editor {
        width: 100%;
        margin: 0 auto;
        position: relative;
        z-index: 0;
      }
      .toolbar {
        border: 1px solid rgb(148, 147, 147);
      }
      .text {
        border: 1px solid rgb(122, 122, 122);
        min-height: 500px;
      }
    </style>

到这里就完了，创建成功，这里的难点就是上传图片的路径配置，摸索了一阵，如果你上传的图片是base64格式，也就是`this.editor.customConfig.uploadImgShowBase64 = true`，就没这么多麻烦，去掉配置上传路径这些代码，就ok了，但是这个是有弊端的，比如你的图片很多，很大，那你想想，这代码多长，所以还是用file文件格式比较靠谱一些。

官网github上有vue的demo，直接下载下来就可以用，多看看文档。

[2020040419263436.png]: /images/20230528/1349b626ec8e4bfe8bf29781572b24c0.png
[20200404193001953.png]: /images/20230528/64379fa862f24075b4ddde48eca95871.png
[20200404193047244.png]: /images/20230528/1c92703258994af982906bd0124ac3df.png