wangEditor富文本编辑器导入图片和视频配置(Vue)

苦逼的猿宝2024-03-05 13:11

前言

wangEditor的导入图片和视频的详细配置，官网上面有配置很详细。自己简单在项目中使用了一下，总结一下。

官方地址

wangEditorhttps://www.wangeditor.com/

技术配置

wangEditor 5版本

vue2 + vuecli脚手架

element-plus组件库（我使用的是vue+element-plus版本，个人觉得ui更好一点）

配置方式

下面直接在data中进行配置就可以了，下面的就是上传视频和图片的配置方式，由于接口是我自己写的，所以server的地址是本地的。

javascript 复制代码 
data() {
    return {
      editorConfig: {
        placeholder: '请输入内容...',
        // autoFocus: false,
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          // 图片上传
          uploadImage: {
            server: 'http://127.0.0.1/upload/up',
            fieldName: 'file',
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 10 * 1024 * 1024, // 10M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
              // token: 'xxx',
              // otherKey: 'yyy'
              // file:''
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 自定义增加 http  header
            headers: {
              Authorization:getToken()
              // Accept: 'text/x-json',
              // otherKey: 'xxx'
            },
            withCredentials: false,// 跨域是否传递 cookie ，默认为 false
            timeout: 10 * 1000, // 超时时间，默认为 10 秒
            // 上传前
            onBeforeUpload(files) {
              ElMessage({
                message: '图片正在上传中,请耐心等待',
                duration: 0,
                customClass: 'uploadTip',
                iconClass: 'el-icon-loading',
                showClose: true
              });
              return files;
            },
            // 自定义插入图片
            customInsert(res, insertFn) {
              // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
              // 先关闭等待的Message
              ElMessage.closeAll();
              if (res.code === 1) {
                ElMessage.success({
                  message: `${res.data.name} 上传成功`
                });
              } else {
                ElMessage.error({
                  message: `${res.data.name} 上传失败，请重新尝试`
                });
              }
              insertFn(res.data.path, res.data.name, res.data.path);
            },
            // 单个文件上传成功之后
            onSuccess(file, res) {
              console.log(`${file.name} 上传成功`, res);
            },
            // 单个文件上传失败
            onFailed(file, res) {
              console.log(`${file.name} 上传失败`, res);
            },
            // 上传进度的回调函数
            onProgress(progress) {
              console.log('progress', progress);
              // progress 是 0-100 的数字
            },
            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {
              console.log(`${file.name} 上传出错`, err, res);
            }
          },
          //视频上传
          uploadVideo: {
            fieldName: 'file',
            server: 'http://127.0.0.1/upload/up',
            // 单个文件的最大体积限制，默认为 10M
            maxFileSize: 50 * 1024 * 1024, // 50M
            // 最多可上传几个文件，默认为 5
            maxNumberOfFiles: 3,
            // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['video/*'],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
              // token: 'xxx',
              // otherKey: 'yyy'
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 自定义增加 http  header
            headers: {
              Authorization:getToken()
              // Accept: 'text/x-json',
              // otherKey: 'xxx'
            },
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: false,
            // 超时时间，默认为 30 秒
            timeout: 1000 * 1000, // 1000 秒,
            // 上传之前触发
            onBeforeUpload(file) {
              ElMessage({
                message: '视频正在上传中,请耐心等待',
                duration: 0,
                customClass: 'uploadTip',
                iconClass: 'el-icon-loading',
                showClose: true
              });
              return file;
            },
            // 自定义插入视频
            customInsert(res, insertFn) {
              // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
              // 先关闭等待的Message
              ElMessage.closeAll();
              if (res.code === 1) {
                ElMessage.success({
                  message: `${res.data.name} 上传成功`
                });
              } else {
                ElMessage.error({
                  message: `${res.data.name} 上传失败，请重新尝试`
                });
              }
              insertFn(res.data.path, res.data.path);
            },
            // 上传进度的回调函数
            onProgress(progress) {
              console.log(progress);
              // onProgress(progress) {       // JS 语法
              // progress 是 0-100 的数字
            },

            // // 单个文件上传成功之后
            // onSuccess(file, res) {
            //   console.log(`${file.name} 上传成功`, res);
            //   this.successMsg(file);
            // },

            // // 单个文件上传失败
            // onFailed(file, res) {
            //   console.log(`${file.name} 上传失败`, res);
            //   this.errorMsg(file);
            // },

            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {
              console.log(`${file.name} 上传出错`, err, res);
              Notification.error({
                title: '错误',
                message: `${file.name} 上传失败，请重新尝试`
              });
            }
          }
        }
      },
    }
  },

项目完整代码

javascript 复制代码 
<template>
  <div>
    <el-button type="primary" @click="goBack" class="top_back">返回</el-button>
    <div style="border: 1px solid #ccc;">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
        @onCreated="CreateContent" />
    </div>
    <div class="onsumbit">
      <el-button type="primary" @click="onSumbit">提交内容</el-button>
    </div>
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ElMessage } from 'element-plus'
import { getToken } from '@/utils/common/common'
import { ArticleDetailApi, ArticleEditApi } from '../../api/index'
export default {
  name: "WangContent",
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {},
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', // or 'simple'
      upload:"http://127.0.0.1:80" + "/upload/up",
      editorConfig: {
        placeholder: '请输入内容...',
        // autoFocus: false,
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          // 图片上传
          uploadImage: {
            server: 'http://127.0.0.1/upload/up',
            fieldName: 'file',
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 10 * 1024 * 1024, // 10M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
              // token: 'xxx',
              // otherKey: 'yyy'
              // file:''
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 自定义增加 http  header
            headers: {
              Authorization:getToken()
              // Accept: 'text/x-json',
              // otherKey: 'xxx'
            },
            withCredentials: false,// 跨域是否传递 cookie ，默认为 false
            timeout: 10 * 1000, // 超时时间，默认为 10 秒
            // 上传前
            onBeforeUpload(files) {
              ElMessage({
                message: '图片正在上传中,请耐心等待',
                duration: 0,
                customClass: 'uploadTip',
                iconClass: 'el-icon-loading',
                showClose: true
              });
              return files;
            },
            // 自定义插入图片
            customInsert(res, insertFn) {
              // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
              // 先关闭等待的Message
              ElMessage.closeAll();
              if (res.code === 1) {
                ElMessage.success({
                  message: `${res.data.name} 上传成功`
                });
              } else {
                ElMessage.error({
                  message: `${res.data.name} 上传失败，请重新尝试`
                });
              }
              insertFn(res.data.path, res.data.name, res.data.path);
            },
            // 单个文件上传成功之后
            onSuccess(file, res) {
              console.log(`${file.name} 上传成功`, res);
            },
            // 单个文件上传失败
            onFailed(file, res) {
              console.log(`${file.name} 上传失败`, res);
            },
            // 上传进度的回调函数
            onProgress(progress) {
              console.log('progress', progress);
              // progress 是 0-100 的数字
            },
            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {
              console.log(`${file.name} 上传出错`, err, res);
            }
          },
          //视频上传
          uploadVideo: {
            fieldName: 'file',
            server: 'http://127.0.0.1/upload/up',
            // 单个文件的最大体积限制，默认为 10M
            maxFileSize: 50 * 1024 * 1024, // 50M
            // 最多可上传几个文件，默认为 5
            maxNumberOfFiles: 3,
            // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['video/*'],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
              // token: 'xxx',
              // otherKey: 'yyy'
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 自定义增加 http  header
            headers: {
              Authorization:getToken()
              // Accept: 'text/x-json',
              // otherKey: 'xxx'
            },
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: false,
            // 超时时间，默认为 30 秒
            timeout: 1000 * 1000, // 1000 秒,
            // 上传之前触发
            onBeforeUpload(file) {
              ElMessage({
                message: '视频正在上传中,请耐心等待',
                duration: 0,
                customClass: 'uploadTip',
                iconClass: 'el-icon-loading',
                showClose: true
              });
              return file;
            },
            // 自定义插入视频
            customInsert(res, insertFn) {
              // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
              // 先关闭等待的Message
              ElMessage.closeAll();
              if (res.code === 1) {
                ElMessage.success({
                  message: `${res.data.name} 上传成功`
                });
              } else {
                ElMessage.error({
                  message: `${res.data.name} 上传失败，请重新尝试`
                });
              }
              insertFn(res.data.path, res.data.path);
            },
            // 上传进度的回调函数
            onProgress(progress) {
              console.log(progress);
              // onProgress(progress) {       // JS 语法
              // progress 是 0-100 的数字
            },

            // // 单个文件上传成功之后
            // onSuccess(file, res) {
            //   console.log(`${file.name} 上传成功`, res);
            //   this.successMsg(file);
            // },

            // // 单个文件上传失败
            // onFailed(file, res) {
            //   console.log(`${file.name} 上传失败`, res);
            //   this.errorMsg(file);
            // },

            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {
              console.log(`${file.name} 上传出错`, err, res);
              Notification.error({
                title: '错误',
                message: `${file.name} 上传失败，请重新尝试`
              });
            }
          }
        }
      },
    }
  },
  methods: {
    CreateContent(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    goBack() {
      this.$router.go(-1)
    },
    getDetailArticle() {
      ArticleDetailApi(this.$route.query.id).then(res => {
        console.log(res, '文章的详情');
        if (res.data.code == 1) {
          this.html = res.data.data.content
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    onSumbit() {
      console.log(123456);
      ArticleEditApi({
        id: this.$route.query.id,
        content: this.html
      }).then(res => {
        console.log(123456);
        if (res.data.code == 1) {
          this.$message({
            type: "success",
            message: res.data.msg,
            duration: 1500,
            onClose: () => {
              this.goBack()
            },
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            onClose: () => {
              this.goBack()
            },
          });
        }
      })
    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    this.getDetailArticle()
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },

}
</script>

<style lang="scss" scoped>
.top_back {
  margin-bottom: 20px
}

.onsumbit {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px
}
</style>

结束语

希望可以帮助到大家啦，上面的方式亲测有效！

相关推荐
EricWang135819 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning19 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
晴天飛 雪29 分钟前
React 守卫路由
前端框架·reactjs
web行路人29 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00130 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解