wangeditor富文本上传图片等配置

最新推荐文章于 2024-07-29 15:54:42 发布

旁边有盆绿萝

最新推荐文章于 2024-07-29 15:54:42 发布

阅读量4.2k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_49899911/article/details/126361623

版权

本文介绍了如何在Vue2项目中集成WangEditor富文本编辑器，通过官方模板快速创建编辑器，并详细配置了图片上传功能，包括服务器地址、文件大小限制、文件类型限制、自定义上传参数等。特别强调了`server`字段和`token`放置位置的重要性，确保了上传过程的顺利进行。

摘要由CSDN通过智能技术生成

1、首先安装插件
vue版本时vue2，我使用的时第一个，使用第二个安装插件在我的项目中会有问题
在这里插入图片描述
然后根据官网提供模板的直接复制下来就行
官网地址：https://www.wangeditor.com/v5/for-frame.html#%E9%85%8D%E7%BD%AE
整晚这些就获得了一个富文本模板
2、配置上传图片
a、本地上传
在data中配置，看加粗部分

  data() {
    return {
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容...",
        //看这里
        //-----------------------------------
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
          
          //server必须要配置正确
            server: env.pross+"/upload/postfile",

            maxFileSize: 4 * 1024 * 1024, // 1M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: [],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            fieldName: "file",
            meta: {
            //官网中把token放到了这里，但是请求的时候会看不到token
            },
            headers: {
            //所以token放这里
              token: window.sessionStorage.token,
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: false,
            // 超时时间，默认为 10 秒
            timeout: 5 * 1000, // 5 秒
            customInsert(res, insertFn) {
              // JS 语法
              // res 即服务端的返回结果
              // 从 res 中找到 url alt href ，然后插图图片
              insertFn(res.data);
            },
          },
        },
      },
      mode: "default", // or 'simple'
    };
    //--------------------------------------------
  },