vue中文章复制innnerHtml,到百度编辑器的方法

今天继续是需求记录篇，去年做了一个公有云的vue项目，项目中有一个功能，就是把稿件中的dom内容，粘贴到百度编辑器中，然后在编辑器中基本上可以复原稿件中的样式。下面先看来看一下项目截图。
工具中复制之前的内容

编辑器复制过来的内容

接到需求后，首先先要找一个可以复制文本到粘贴板的插件，经过调研，Clipboard.js成为首选。Clipboard.js的使用如下，

1、安装，通过npm install 安装

2、通过import Clipboard 将Clipboard引入到页面中

3、Clipboard 有两种使用方式，一种是target，一种是text，target是复制对应节点下的dom 字符串，所说的innerHtml，而text 就是复制设置好的text内容。这里要把data-clipboard这个字段写到需要触发复制功能的元素中。区别如下：

这种是复制id为contentArea2中的innerHtml

这种就是复制text双引号中的字符串。

4、创建Clipboard对象，通过new Clipboard()来创建对象，

括号中的.paste是节点的class类名，是你要出发复制事件的节点。

5、实现复制功能，通过Clipboard提供的on方法来监听复制成功，并触发成功后的回调事件

这里的e.clearSelection(); 是为了清除复制之后target元素中的选中样式的。
6、同样也可以监听复制失败

到这里就可以实现复制粘贴到剪切板的功能了。

但是需求是粘贴到百度编辑器中， 继续开始研发，发现dom字符串在百度编辑器中大部分可以正常显示。然后问题又来了，发现有些粘贴过去的内容会有样式变化，音频标签不能播放等问题。

在编辑器中选择查看源码，对比两边的源码发现，粘贴到编辑器中的dom字符串会被改变，如百分比的宽度单位，audio标签等。
解决办法：在dom字符串被粘贴出去之前，就把字符串中被替代的字段替换掉，然后再编辑器的配置文件中，把dom字符串中的内容替换回来。

复制之前的替换，比如我把audio标签替换为audio1

编辑器中的替换，在ueditor.all.js文件中，UE.commands[‘inserthtml’] 配置中，加入替换回来的代码

到此问题解决了，可以还原大部分稿件的样式。