vue中使用wangeditor富文本编辑器结合iviewui上传文件组件写的上传视频,必须要获取wangeditor的焦点

发布于 2022-09-11 17:11:00 字数 1357 浏览 19 评论 0

clipboard.png

methods:{

  
  handleSuccess (res, file,fileList) {         //文件上传成功时的钩子,
    let iframe = res.data.imageUrls[0];
    iframe 是oss返回给我的视频链接,
    this.editor.txt.append("<p><iframe src='"+iframe+"'></iframe></p>")   //把视频链接赋值给editor
    console.log("视频链接")
    console.log(iframe)
    console.log(this.editorContent)
    if(iframe){
      this.$Message.success('上传视频成功!');
    }else{
      this.$Message.error('上传视频失败!');
    }
  },
  
 我上面一步是可以把视频上传到富文本上面的,但是之后必须要获得富文本编辑器的焦点,不然
 
  var editor = new E(this.$refs.editor1)
  editor.customConfig.onchange = (html) => {
    console.log(html)
    this.editorContent = html       如果拿不到富文本的焦点,就没办法走这里,this.editorContent 就拿不到我的视频链接
  };
  
  
  那位大佬能够让我在成功的回调之后让我获得富文本的焦点
  •  ### 问题描述
    

clipboard.png

必须要点击一下富文本,得到富文本的焦点, var editor = new E(this.$refs.editor1)

  editor.customConfig.onchange = (html) => {
    console.log(html)
    this.editorContent = html       
  };
  
this.editorContent才能拿到这个视频    
  

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

你期待的结果是什么?实际看到的错误信息又是什么?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

誰ツ都不明白 2022-09-18 17:11:00

hello world! 试试这样

晨敛清荷 2022-09-18 17:11:00

不需要这么麻烦吧?
这样不行吗?

// this.editor 编辑器实例
this.editor.txt.html(`视频链接`)
天荒地未老 2022-09-18 17:11:00

调用它本身的方法
_.editor.cmd.do('insertHTML', "<p><iframe src='http://127.0.0.1:7001/"+response.data.url+"' width='640' height='320'></iframe></p><p>
</p>");
再把焦点聚焦回去编辑器中
_.editor.selection.restoreSelection();

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文