devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Cpp五条 | 2024-05-13 23:40:32

赞

踩

wangeditor插入图片

前言

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

官方地址

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

技术配置

wangEditor 5版本

vue2 + vuecli脚手架

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

配置方式

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

  1. data() {
  2.     return {
  3.       editorConfig: {
  4.         placeholder: '请输入内容...',
  5.         // autoFocus: false,
  6.         // 所有的菜单配置，都要在 MENU_CONF 属性下
  7.         MENU_CONF: {
  8.           // 图片上传
  9.           uploadImage: {
  10.             server: 'http://127.0.0.1/upload/up',
  11.             fieldName: 'file',
  12.             // 单个文件的最大体积限制，默认为 2M
  13.             maxFileSize: 10 * 1024 * 1024, // 10M
  14.             // 最多可上传几个文件，默认为 100
  15.             maxNumberOfFiles: 10,
  16.             // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  17.             allowedFileTypes: ['image/*'],
  18.             // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
  19.             meta: {
  20.               // token: 'xxx',
  21.               // otherKey: 'yyy'
  22.               // file:''
  23.             },
  24.             // 将 meta 拼接到 url 参数中，默认 false
  25.             metaWithUrl: false,
  26.             // 自定义增加 http  header
  27.             headers: {
  28.               Authorization:getToken()
  29.               // Accept: 'text/x-json',
  30.               // otherKey: 'xxx'
  31.             },
  32.             withCredentials: false,// 跨域是否传递 cookie ，默认为 false
  33.             timeout: 10 * 1000, // 超时时间，默认为 10 秒
  34.             // 上传前
  35.             onBeforeUpload(files) {
  36.               ElMessage({
  37.                 message: '图片正在上传中,请耐心等待',
  38.                 duration: 0,
  39.                 customClass: 'uploadTip',
  40.                 iconClass: 'el-icon-loading',
  41.                 showClose: true
  42.               });
  43.               return files;
  44.             },
  45.             // 自定义插入图片
  46.             customInsert(res, insertFn) {
  47.               // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
  48.               // 先关闭等待的Message
  49.               ElMessage.closeAll();
  50.               if (res.code === 1) {
  51.                 ElMessage.success({
  52.                   message: `${res.data.name} 上传成功`
  53.                 });
  54.               } else {
  55.                 ElMessage.error({
  56.                   message: `${res.data.name} 上传失败，请重新尝试`
  57.                 });
  58.               }
  59.               insertFn(res.data.path, res.data.name, res.data.path);
  60.             },
  61.             // 单个文件上传成功之后
  62.             onSuccess(file, res) {
  63.               console.log(`${file.name} 上传成功`, res);
  64.             },
  65.             // 单个文件上传失败
  66.             onFailed(file, res) {
  67.               console.log(`${file.name} 上传失败`, res);
  68.             },
  69.             // 上传进度的回调函数
  70.             onProgress(progress) {
  71.               console.log('progress', progress);
  72.               // progress 是 0-100 的数字
  73.             },
  74.             // 上传错误，或者触发 timeout 超时
  75.             onError(file, err, res) {
  76.               console.log(`${file.name} 上传出错`, err, res);
  77.             }
  78.           },
  79.           //视频上传
  80.           uploadVideo: {
  81.             fieldName: 'file',
  82.             server: 'http://127.0.0.1/upload/up',
  83.             // 单个文件的最大体积限制，默认为 10M
  84.             maxFileSize: 50 * 1024 * 1024, // 50M
  85.             // 最多可上传几个文件，默认为 5
  86.             maxNumberOfFiles: 3,
  87.             // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
  88.             allowedFileTypes: ['video/*'],
  89.             // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
  90.             meta: {
  91.               // token: 'xxx',
  92.               // otherKey: 'yyy'
  93.             },
  94.             // 将 meta 拼接到 url 参数中，默认 false
  95.             metaWithUrl: false,
  96.             // 自定义增加 http  header
  97.             headers: {
  98.               Authorization:getToken()
  99.               // Accept: 'text/x-json',
  100.               // otherKey: 'xxx'
  101.             },
  102.             // 跨域是否传递 cookie ，默认为 false
  103.             withCredentials: false,
  104.             // 超时时间，默认为 30 秒
  105.             timeout: 1000 * 1000, // 1000 秒,
  106.             // 上传之前触发
  107.             onBeforeUpload(file) {
  108.               ElMessage({
  109.                 message: '视频正在上传中,请耐心等待',
  110.                 duration: 0,
  111.                 customClass: 'uploadTip',
  112.                 iconClass: 'el-icon-loading',
  113.                 showClose: true
  114.               });
  115.               return file;
  116.             },
  117.             // 自定义插入视频
  118.             customInsert(res, insertFn) {
  119.               // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
  120.               // 先关闭等待的Message
  121.               ElMessage.closeAll();
  122.               if (res.code === 1) {
  123.                 ElMessage.success({
  124.                   message: `${res.data.name} 上传成功`
  125.                 });
  126.               } else {
  127.                 ElMessage.error({
  128.                   message: `${res.data.name} 上传失败，请重新尝试`
  129.                 });
  130.               }
  131.               insertFn(res.data.path, res.data.path);
  132.             },
  133.             // 上传进度的回调函数
  134.             onProgress(progress) {
  135.               console.log(progress);
  136.               // onProgress(progress) {       // JS 语法
  137.               // progress 是 0-100 的数字
  138.             },
  139.  
  140.             // // 单个文件上传成功之后
  141.             // onSuccess(file, res) {
  142.             //   console.log(`${file.name} 上传成功`, res);
  143.             //   this.successMsg(file);
  144.             // },
  145.  
  146.             // // 单个文件上传失败
  147.             // onFailed(file, res) {
  148.             //   console.log(`${file.name} 上传失败`, res);
  149.             //   this.errorMsg(file);
  150.             // },
  151.  
  152.             // 上传错误，或者触发 timeout 超时
  153.             onError(file, err, res) {
  154.               console.log(`${file.name} 上传出错`, err, res);
  155.               Notification.error({
  156.                 title: '错误',
  157.                 message: `${file.name} 上传失败，请重新尝试`
  158.               });
  159.             }
  160.           }
  161.         }
  162.       },
  163.     }
  164.   },

项目完整代码

  1. <template>
  2.   <div>
  3.     <el-button type="primary" @click="goBack" class="top_back">返回</el-button>
  4.     <div style="border: 1px solid #ccc;">
  5.       <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
  6.       <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
  7.         @onCreated="CreateContent" />
  8.     </div>
  9.     <div class="onsumbit">
  10.       <el-button type="primary" @click="onSumbit">提交内容</el-button>
  11.     </div>
  12.   </div>
  13. </template>
  14.  
  15. <script>
  16. import '@wangeditor/editor/dist/css/style.css' // 引入 css
  17. import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  18. import { ElMessage } from 'element-plus'
  19. import { getToken } from '@/utils/common/common'
  20. import { ArticleDetailApi, ArticleEditApi } from '../../api/index'
  21. export default {
  22.   name: "WangContent",
  23.   components: { Editor, Toolbar },
  24.   data() {
  25.     return {
  26.       editor: null,
  27.       html: '',
  28.       toolbarConfig: {},
  29.       editorConfig: { placeholder: '请输入内容...' },
  30.       mode: 'default', // or 'simple'
  31.       upload:"http://127.0.0.1:80" + "/upload/up",
  32.       editorConfig: {
  33.         placeholder: '请输入内容...',
  34.         // autoFocus: false,
  35.         // 所有的菜单配置，都要在 MENU_CONF 属性下
  36.         MENU_CONF: {
  37.           // 图片上传
  38.           uploadImage: {
  39.             server: 'http://127.0.0.1/upload/up',
  40.             fieldName: 'file',
  41.             // 单个文件的最大体积限制，默认为 2M
  42.             maxFileSize: 10 * 1024 * 1024, // 10M
  43.             // 最多可上传几个文件，默认为 100
  44.             maxNumberOfFiles: 10,
  45.             // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  46.             allowedFileTypes: ['image/*'],
  47.             // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
  48.             meta: {
  49.               // token: 'xxx',
  50.               // otherKey: 'yyy'
  51.               // file:''
  52.             },
  53.             // 将 meta 拼接到 url 参数中，默认 false
  54.             metaWithUrl: false,
  55.             // 自定义增加 http  header
  56.             headers: {
  57.               Authorization:getToken()
  58.               // Accept: 'text/x-json',
  59.               // otherKey: 'xxx'
  60.             },
  61.             withCredentials: false,// 跨域是否传递 cookie ，默认为 false
  62.             timeout: 10 * 1000, // 超时时间，默认为 10 秒
  63.             // 上传前
  64.             onBeforeUpload(files) {
  65.               ElMessage({
  66.                 message: '图片正在上传中,请耐心等待',
  67.                 duration: 0,
  68.                 customClass: 'uploadTip',
  69.                 iconClass: 'el-icon-loading',
  70.                 showClose: true
  71.               });
  72.               return files;
  73.             },
  74.             // 自定义插入图片
  75.             customInsert(res, insertFn) {
  76.               // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
  77.               // 先关闭等待的Message
  78.               ElMessage.closeAll();
  79.               if (res.code === 1) {
  80.                 ElMessage.success({
  81.                   message: `${res.data.name} 上传成功`
  82.                 });
  83.               } else {
  84.                 ElMessage.error({
  85.                   message: `${res.data.name} 上传失败，请重新尝试`
  86.                 });
  87.               }
  88.               insertFn(res.data.path, res.data.name, res.data.path);
  89.             },
  90.             // 单个文件上传成功之后
  91.             onSuccess(file, res) {
  92.               console.log(`${file.name} 上传成功`, res);
  93.             },
  94.             // 单个文件上传失败
  95.             onFailed(file, res) {
  96.               console.log(`${file.name} 上传失败`, res);
  97.             },
  98.             // 上传进度的回调函数
  99.             onProgress(progress) {
  100.               console.log('progress', progress);
  101.               // progress 是 0-100 的数字
  102.             },
  103.             // 上传错误，或者触发 timeout 超时
  104.             onError(file, err, res) {
  105.               console.log(`${file.name} 上传出错`, err, res);
  106.             }
  107.           },
  108.           //视频上传
  109.           uploadVideo: {
  110.             fieldName: 'file',
  111.             server: 'http://127.0.0.1/upload/up',
  112.             // 单个文件的最大体积限制，默认为 10M
  113.             maxFileSize: 50 * 1024 * 1024, // 50M
  114.             // 最多可上传几个文件，默认为 5
  115.             maxNumberOfFiles: 3,
  116.             // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
  117.             allowedFileTypes: ['video/*'],
  118.             // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
  119.             meta: {
  120.               // token: 'xxx',
  121.               // otherKey: 'yyy'
  122.             },
  123.             // 将 meta 拼接到 url 参数中，默认 false
  124.             metaWithUrl: false,
  125.             // 自定义增加 http  header
  126.             headers: {
  127.               Authorization:getToken()
  128.               // Accept: 'text/x-json',
  129.               // otherKey: 'xxx'
  130.             },
  131.             // 跨域是否传递 cookie ，默认为 false
  132.             withCredentials: false,
  133.             // 超时时间，默认为 30 秒
  134.             timeout: 1000 * 1000, // 1000 秒,
  135.             // 上传之前触发
  136.             onBeforeUpload(file) {
  137.               ElMessage({
  138.                 message: '视频正在上传中,请耐心等待',
  139.                 duration: 0,
  140.                 customClass: 'uploadTip',
  141.                 iconClass: 'el-icon-loading',
  142.                 showClose: true
  143.               });
  144.               return file;
  145.             },
  146.             // 自定义插入视频
  147.             customInsert(res, insertFn) {
  148.               // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
  149.               // 先关闭等待的Message
  150.               ElMessage.closeAll();
  151.               if (res.code === 1) {
  152.                 ElMessage.success({
  153.                   message: `${res.data.name} 上传成功`
  154.                 });
  155.               } else {
  156.                 ElMessage.error({
  157.                   message: `${res.data.name} 上传失败，请重新尝试`
  158.                 });
  159.               }
  160.               insertFn(res.data.path, res.data.path);
  161.             },
  162.             // 上传进度的回调函数
  163.             onProgress(progress) {
  164.               console.log(progress);
  165.               // onProgress(progress) {       // JS 语法
  166.               // progress 是 0-100 的数字
  167.             },
  168.  
  169.             // // 单个文件上传成功之后
  170.             // onSuccess(file, res) {
  171.             //   console.log(`${file.name} 上传成功`, res);
  172.             //   this.successMsg(file);
  173.             // },
  174.  
  175.             // // 单个文件上传失败
  176.             // onFailed(file, res) {
  177.             //   console.log(`${file.name} 上传失败`, res);
  178.             //   this.errorMsg(file);
  179.             // },
  180.  
  181.             // 上传错误，或者触发 timeout 超时
  182.             onError(file, err, res) {
  183.               console.log(`${file.name} 上传出错`, err, res);
  184.               Notification.error({
  185.                 title: '错误',
  186.                 message: `${file.name} 上传失败，请重新尝试`
  187.               });
  188.             }
  189.           }
  190.         }
  191.       },
  192.     }
  193.   },
  194.   methods: {
  195.     CreateContent(editor) {
  196.       this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
  197.     },
  198.     goBack() {
  199.       this.$router.go(-1)
  200.     },
  201.     getDetailArticle() {
  202.       ArticleDetailApi(this.$route.query.id).then(res => {
  203.         console.log(res, '文章的详情');
  204.         if (res.data.code == 1) {
  205.           this.html = res.data.data.content
  206.         } else {
  207.           this.$message.error(res.msg)
  208.         }
  209.       })
  210.     },
  211.     onSumbit() {
  212.       console.log(123456);
  213.       ArticleEditApi({
  214.         id: this.$route.query.id,
  215.         content: this.html
  216.       }).then(res => {
  217.         console.log(123456);
  218.         if (res.data.code == 1) {
  219.           this.$message({
  220.             type: "success",
  221.             message: res.data.msg,
  222.             duration: 1500,
  223.             onClose: () => {
  224.               this.goBack()
  225.             },
  226.           });
  227.         } else {
  228.           this.$message({
  229.             type: "error",
  230.             message: res.data.msg,
  231.             onClose: () => {
  232.               this.goBack()
  233.             },
  234.           });
  235.         }
  236.       })
  237.     }
  238.   },
  239.   mounted() {
  240.     // 模拟 ajax 请求，异步渲染编辑器
  241.     this.getDetailArticle()
  242.   },
  243.   beforeDestroy() {
  244.     const editor = this.editor
  245.     if (editor == null) return
  246.     editor.destroy() // 组件销毁时，及时销毁编辑器
  247.   },
  248.  
  249. }
  250. </script>
  251.  
  252. <style lang="scss" scoped>
  253. .top_back {
  254.   margin-bottom: 20px
  255. }
  256.  
  257. .onsumbit {
  258.   display: flex;
  259.   justify-content: center;
  260.   align-items: center;
  261.   margin-top: 40px
  262. }
  263. </style>

结束语

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/566266
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号