y2you 2023-04-18 10:34 采纳率: 0%
浏览 7

Tinymce El-upload

富文本编辑器上传文件到阿里云,富文本编辑器:Tinymce
项目里之前也有地方上传了文件,使用的是element plus的上传组件,在上传前请求ossparam接口获取上传时需要的参数,然后带入到第二个接口上传,上传动作时通过ref.submit()触发的,但是在tinnmce里就不生效了,麻烦各位帮忙看下,感恩!

接口请求

img


富文本组件里加一个upload去手动触发上传

img


触发函数

img


报错,ref打印出来明明有submit方法,但是调用就undefined了,nextTick延迟什么的都试了,也没有用

img

  • 写回答

2条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-04-19 17:15
    关注
    不知道你这个问题是否已经解决, 如果还没有解决的话:
    • 以下回答来自chatgpt: 如果在Tinymce富文本编辑器中使用element plus的上传组件无法正常工作,并且使用ref.submit()方法也无法触发上传操作,可以考虑使用axios进行上传操作。 步骤如下: 1.在Tinymce中增加一个upload函数,该函数将文件上传到阿里云。例如: ```javascript upload(file) { // 发起请求获取oss参数 axios.get('/getOssParam').then(res => { const formData = new FormData(); formData.append('key', res.data.key); formData.append('policy', res.data.policy); formData.append('OSSAccessKeyId', res.data.accessid); formData.append('success_action_status', '200'); formData.append('signature', res.data.signature); formData.append('file', file); // 上传文件 axios.post(res.data.host, formData).then((response) => { console.log('上传成功:' + response.url); // 将上传成功的url返回给富文本编辑器 this.$emit('insertImage', response.url); }).catch((error) => { console.log(error); }); }).catch(error => { console.log(error); }); } ``` 2.在Tinymce中添加一个上传按钮,并绑定upload函数即可。例如: ```javascript
      上传图片
      <script></script> ``` 这样就可以在Tinymce中上传文件到阿里云了。请注意:在上传文件之前需要发起请求获取阿里云的oss参数,该函数的实现需要使用axios或其他类似的库。

    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论

报告相同问题?

问题事件

  • 创建了问题 4月18日

悬赏问题

  • ¥20 C#上传XML格式数据
  • ¥15 elementui上传结合oss接口断点续传,现在只差停止上传和继续上传,各大精英看下
  • ¥100 单片机hardfaulr
  • ¥20 手机截图相片分辨率降低一半
  • ¥50 求一段sql语句,遇到小难题了,可以50米解决
  • ¥15 速求,对多种商品的购买力优化问题(用遗传算法、枚举法、粒子群算法、模拟退火算法等方法求解)
  • ¥100 速求!商品购买力最优化问题(用遗传算法求解,给出python代码)
  • ¥15 虚拟机检测,可以是封装好的DLL,可付费
  • ¥15 kafka无法正常启动(只启动了一瞬间会然后挂了)
  • ¥15 Workbench中材料库无法更新,如何解决?