Vue页面使用多个WangEditor

原创已于 2022-08-27 18:28:40 修改 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

于 2022-08-27 17:49:29 首次发布

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用WangEditor创建多个富文本编辑框。详细步骤包括引入样式、编辑框模板的创建、JS代码的编写以及图片上传接口的实现。每个编辑框都需要独立的方法进行内容处理和数据保存。

一：前言：

二：开始正文：

三：JS代码：

四：图片上传 WangEditupload1（）方法：

一：前言：

我本是后端，无奈公司也要我做前端。接了一个新的需求。一个页面要出现多个超文本编辑框如下图所示：

于是我开始做调研，找到了一款非常好用的富文本编辑器WangEditor。

一定要引入样式：最基本的安装，请移步官网！

<!-- 引入wangEditor样式 -->
<style src="@wangeditor/editor/dist/css/style.css">
</style>

二：开始正文：

编辑框：有几个编辑框就写几个template，但是里面的ref和class的值一定要改

     <template>
          <div style="border: 1px solid #ccc;">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="15" :lg="20" :xl="15">
                <div ref="editor" class="text " />
              </el-col>
            </el-row>
          </div>
        </template>

如下图所示：

三：JS代码：

export default {
  // components: { Editor, Toolbar },
  data() {
    return {
      ruleForm: {
        id: '',
        type: '',
        name: ''
      }, // 表单数据
      show: false,
      shows: false,
      headers: {
        'Authorization': getToken()
      },
      file: null,
      uploadApi: '',
      uploadApis: '',
      html: '<p>请输入内容</p>',
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {},
      },
      editor: '',
      editor1: '',
      editor2: '',
      editor3: '',
      editor4: '',
      editorContent: "",
      editorContent1: "",
      editorContent2: "",
      editorContent3: "",
      editorContent4: "",
      text: "",
      text1:'',
      text2: "",
      text3: "",
      text4: "",
      mode: 'default', // or 'simple'
      url: ''
    }

mounted：因为我要有四个编辑框，所以我抽取了4个方法，下面只写一个方法。

  mounted() {
    this.WangEditupload1()
    this.WangEditupload2()
    this.WangEditupload3()
    this.WangEditupload4()
  }

四：图片上传 WangEditupload1（）方法：

   WangEditupload1() {
      const _this = this
      this.editor = new E(this.$refs.editor)
      this.editor.customConfig.zIndex = 1
      this.editor.customConfig.customUploadImg = function (files, insert) {

        files.forEach(image => {
          var data = new FormData()
          data.append('file', image)
          utils.uploadOssFile(data, "info")
            .then(res => {
              console.log(res);
              insert(res)
            })
        })
      }
      this.editor.customConfig.onchange = (html) => {
        this.editorContent = html
      }
      this.editor.create()
      // 初始化数据
      this.editor.txt.html(this.editorContent)
    }

seteditor() {
      this.editor = new E(this.$refs.toolbar, this.$refs.editor);
      this.editor.customConfig.uploadImgShowBase64 = false; // base 64 存储图片
      this.editor.customConfig.uploadImgServer = "http://192.168.2.126:8100/oss/uploadFile2/info"; // 配置服务器端地址
      this.editor.customConfig.uploadImgHeaders = {}; // 自定义 header
      this.editor.customConfig.uploadFileName = "file"; // 后端接受上传文件的参数名
      this.editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024; // 将图片大小限制为 5M
      this.editor.customConfig.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
      this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间

      this.editor.customConfig.uploadImgHooks = {
        fail: (xhr, editor, result) => {
          // 插入图片失败回调
          console.log("失败----");
        },
        success: (xhr, editor, result) => {
          // 图片上传成功回调
          console.log("成功----");
        },
        timeout: (xhr, editor) => {
          // 网络超时的回调
          console.log("超时----");
        },
        error: (xhr, editor) => {
          // 图片上传错误的回调
          console.log("错误回调啊---");
        },
        customInsert: (insertImg, result, editor) => {

          console.log(insertImg, result, editor)
        },
      };
      this.editor.customConfig.onchange = (html) => {
        this.info_ = html;//绑定当前的组件的值
        this.$emit("change", this.info_); // 将内容同步到父组件中
      };
      // 创建富文本编辑器
      this.editor.create();

    }

图片上传的接口：

import request from '@/utils/request'
const api_name = '/ossPic'

export default {
    uploadOssFile(file, type) {
        return request({
            url: `${api_name}/uploadFile/${type}`,
            method: 'post',
            //后端用requestBody获取数据时,data表示把对象转换成json进行数据传递
            data: file
        })
    },
}

有几个编辑框就写几个这个方法就ok了。

点击保存的时候：将编辑器中的数据赋值给data里面的数据

this.ruleForm.basicInformation = this.editorContent
this.ruleForm.protectionLevel = this.editorContent2
this.ruleForm.morphologicalCharacteristics = this.editorContent3
this.ruleForm.livingHabits = this.editorContent4