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

最新推荐文章于 2024-07-06 16:55:42 发布
最新推荐文章于 2024-07-06 16:55:42 发布
阅读量2.0k 收藏 12
点赞数 32
分类专栏： vue 文章标签： vue.js javascript ecmascript 前端框架 前端 音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GAGGAAAAA/article/details/136386711
版权

前言

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

官方地址

wangEditoricon-default.png?t=N7T8https://www.wangeditor.com/

技术配置

wangEditor 5版本

vue2 + vuecli脚手架

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

配置方式

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

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} 上传失败，请重新尝试`
              });
            }
          }
        }
      },
    }
  },

项目完整代码

<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>

结束语

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

苦逼的猿宝
关注
  • 32
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
专栏目录
wangEditor富文本实现自定义插入数据（手把手）
Jul的博客
05-29 641
vue2和wangEditor自定义插入内容按钮实战。
wangEditor上传图片 demo
10-28
wangEditor上传图片，java图片上传后台代码；下载解压后导入eclipse,然后把项目发布到tomcat中即可，
wangEditor3上传本地视频
11-12
<!--下载js和贴上这段代码即可--> [removed][removed] <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！--> [removed] function loadEditor(){ var E = window.wangEditor; var editor = new E('#editor'); //上传视频 editor.customConfig.customUploadVideo = function (files, obj) { var date = new FormData(); date.append("file", files[0]); $.ajax({ type: "POST", url: "../../import/upload", data: date, dataType: 'json', async: false, cache: false, contentType: false, processData: false, success: function (result) { obj.callback(result.data); } }); }; editor.create();//创建富文本 } [removed]
vue结合element-ui和quill富文本编辑器实现上传视频和封面
12-03
vue结合element-ui和quill富文本编辑器实现上传视频和封面
wangEditor富文本插入图片文本框高度适配
热门推荐
eifuaer
10-24 1万+
这是一个富文本框，用的是wangeditor: 对应html代码为： 上传图片过后，虽然在div1上直接写了一个样式（style="height:auto;" ）但是文本框并没有 根据图片的高度自适应，可见，这段css根本没起作用，原因在于被wangeditor的js文件重写了。 解决方案： 在创建editor的最后添加定义css的代码，即在 editor.create
vue2+wangEditor5富文本编辑器（图片视频自定义上传七牛云/服务器）
weixin_53474595的博客
07-28 3462
this.upqiniu是我写的上传服务器的代码，最终将接口返回的地址return出去就行。上传到后台接口的可直接按照文档这个配置就行接口返回格式也要可文档上一致。2）自定义上传（一般上传到别的服务器上，我这边是上传到。到这一步编辑器就可以正常显示了。在data配置上传图片、视频。在main.js中引入样式。在使用编辑器的页面引入js。
WangEditor自定义上传插入图片
weixin_57925162的博客
09-06 1029
WangEditor自定义上传插入图片。
在vue3中使用富文本编辑器WangEditor添加图片
ddf__的博客
12-04 1460
上传本地图片到后端，后端返回图片地址，在插入编辑器中
在vue3中使用富文本编辑器WangEditor + 添加图片
用心创作每一篇文章
11-16 1316
上传本地图片到后端，后端返回图片地址，在插入编辑器中。
window.wangEditors 富文本操作,重点关于插入上传图片
李国峰
07-06 3069
具体的一些操作我是看别人写的博客，这个是地址https://blog.csdn.net/yehaocheng520/article/details/106033965 写的挺好的 具体的上传图片的操作 https://blog.csdn.net/weixin_40079336/article/details/82964495 上传图片的操作刚开始看可能会不太明白，主要的代码就是 <script type="text/javascript"> var E = windo
vue 富文本编辑器 wangeditor 自定义上传图片 以及 解决 复制粘贴 word 没有图片的情况
weixin_54203047的博客
10-07 4248
实现步骤： 注意获取粘贴的 html和获取 rtf 数据 ，用let，不能用const,下面会发生修改 -链接：https://juejin.cn/post/7144335819275255845。本人比较喜欢用这一款编辑器，官方文档：(上传图片我这里有点特殊，就不细说了。原理：可以去看看他的文章，不错 (我主要来说说怎么使用。
HTML前端wangEditor富文本编辑器demo（jQuery）
02-14
wangEditor就是这样一个强大的富文本编辑器，它专为JavaScript和jQuery设计，同时也能很好地融入Vue等现代前端框架。本示例是一个基于jQuery的wangEditor应用，具有丰富的功能，包括图片可拖拽调整大小，以及方便地...
一款纯VUE3 开发的富文本编辑器 editor
10-18
Vue3 Ts Editor是一款基于Vue3框架完全独立开发的富文本编辑器，专为现代Web应用设计，无需依赖任何第三方库或图片JS组件。这个编辑器的亮点在于其轻量化和易用性，使得开发者能够快速集成到自己的项目中，极大地...
vue3-wangeditor:基于Wangeditor富文本编辑器，用于Vue3.x的组件
04-02
vue3-wangeditor是一种基于wangEditor二次封装的Vue3.x的Web富文本编辑器，轻量，简洁，易用，开源免费。 兼容常见的PC浏览器：Chrome，Firefox，Safar，Edge，QQ浏览器，IE11。 不支持移动端。 wangEditor当前是v4...
Vue3富文本编辑器组件封装
10-25
在本文中，我们将深入探讨如何在Vue3框架中封装一个基于TinyMCE的富文本编辑器组件，并且重点介绍如何实现自定义样式和汉化配置。TinyMCE是一款功能强大的开源富文本编辑器，它提供了丰富的API和插件，使得在前端...
wangEditor工具栏相关配置设置
最新发布
貔貔的小叶
07-06 313
【代码】wangEditor工具栏相关配置设置。
vue3+wangEditor 5 的图片自定义上传
bpluoxong的博客
05-22 949
第二就是返回的传输路径需要使用insertFn方法再插入进富文本框。的图片上传参数无法满足需求所以需要用自己的上传来覆盖原先的上传。需要注意headers里的对象和原生的是否一致。完整代码，这个是封装的富文本组件的内容。在这里需要注意在进行post请求时，覆盖原生的图片上传操作方法是。这个是Editor.vue。
文本，wangEditor5教程-上传图片，在开发文档的菜单配置当中，去搜索里搜索图片，也可以找到，上传图片必须有服务端的图片，验证接口正确用postman，wangEditor的postman接口
weixin_54048131的博客
03-27 695
用于 Vue React | wangEditorwangEditor5教程07-上传图片_哔哩哔哩_bilibili
wangEditor实现自定义上传图片/视频【customUpload方法配置】
cheecho的博客
08-22 2206
【代码】wangEditor实现自定义上传图片/视频【customUpload方法配置】
vue3如何安装并使用wangEditor富文本编辑器
06-03
首先，你需要在你的 Vue 3 项目中安装 wangEditor，可以通过以下命令进行安装： ``` npm install wangeditor --save ``` 安装完成后，在你的 Vue 3 项目中引入 wangEditor 并进行配置，可以参考以下代码： ```html <template> <div> <div id="editor"></div> </div> </template> <script> import WangEditor from 'wangeditor' export default { mounted() { const editor = new WangEditor('#editor') editor.config.uploadImgServer = '上传图片的接口地址' editor.config.uploadImgMaxLength = 5 // 限制一次最多上传 5 张图片 editor.create() } } </script> ``` 在以上代码中，我们在 mounted 钩子函数中创建了一个 wangEditor 实例，并将其绑定到一个 id 为 "editor" 的 div 元素上。同时，我们还对 wangEditor 进行了一些配置，如设置上传图片的接口地址，以及限制一次最多上传 5 张图片。 最后，我们需要在组件的 style 中引入 wangEditor 的样式： ```css @import 'wangeditor/release/wangEditor.min.css'; ``` 完成以上步骤后，你就可以在 Vue 3 项目中使用 wangEditor 富文本编辑器了。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苦逼的猿宝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值