在vue3中使用富文本编辑器WangEditor添加图片

自定义上传图片的配置 

上传本地图片到后端,后端返回图片地址,在插入编辑器中

const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {
        //上传图片配置
        server: '/pcapi/index/upload', //上传接口地址
        fieldName: 'file', //上传文件名
        methods: 'post',
        metaWithUrl: true, // 参数拼接到 url 上
        // 单个文件上传成功之后
        onSuccess(file, res) {
          console.log(`${file.name} 上传成功`, res);
        },
        // 自定义插入图片
        customInsert(res, insertFn) {
          console.log(res);
          insertFn('htt://接口前缀' + res.url);
        },
      },
    },
  };

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值