react-tinyMCE paste,重新设置粘贴板内容

1,108 阅读1分钟

react-tinyMCE paste事件,重新设置粘贴板内容 需求:粘贴图片时,将图片替换成提示图片 tinyMCE上绑定的是原生的paste事件 成功方案:通过tinyMCE api设置选中区域的内容去替换 `

  if(e.clipboardData.getData('text/html').indexOf('<img') !== -1){
      let htmlTemp = e.clipboardData.getData('text/html')
      let newHtml = htmlTemp.replace(/<img [^>]*>/g,(match, src)=>{
        return '<img width="500" height="370" src="http://XXX">'
      })
      //不用异步不生效
      setTimeout(() => {
        tinyMCE.activeEditor&&tinyMCE.activeEditor.selection.setContent(newHtml)
      }, 0);
      e.preventDefault();
    }

失败方案1:paste MDN上写的是这样实现

const selection = window.getSelection();
if (!selection.rangeCount) return false;
selection.deleteFromDocument();
selection.getRangeAt(0).insertNode(document.createTextNode(paste));

但是会插入到工具栏里面。。。不能找到对应的target dom

//本来想用clipboardData.setData但是不生效,据说ie才生效 e.clipboardData.setData("text/plain", '123');