关于ue富文本编辑器显示小程序卡片的相关开发

由于需求，需要在富文本编辑器里面显示小程序卡片不多说直接干：

首先说一下我的思路：

我使用的百度的ue编辑器，这个编辑器提供了一个方法可以通过 execCommand 这个方法可以插入到富文本编辑器里面显示对应的内容，我最初的想法就是写一段hml代码出来 然后将这段html代码插入进去显示。

ue.execCommand('inserthtml', '<span>我的小程序卡片代码</span>');

但是我用上面的思路去实现这样的功能有一点问题，以下是出现的问题：

1、就是我可以把我自己写的代码插入进去，但是如果不写行内样式就会出现样式紊乱的问题，结局办法就是再ue那个富文本编辑器下有个iframe.css在里面加上你的样式，可以暂时解决这个问题。

2、第一个问题解决了以后，样式虽然没有问题了，但是出现了另外一个问题，就像富文本编辑器你在里面添加一些文字，一些图片，其实底层都是一些html代码，你想删除就可以直接删除了，但是我们这个小程序卡片不是ue编辑器内部的功能，我们好不容易才给他显示在富文本编辑器里面，所以我们不想就可以随便的把里面某一段删除了，这样就失去了本来的意意义。于是我又参考了微信富文本编辑器这种功能实现的原理，就是再富文本编辑器里面插入一个iframe便签，把之前的html代码插入进去，这样就可以实现我的需求。如果想删除就可以把之前插入的一大段一起删除，不会存在我只删除里面的某一部分。

以上是我实现的效果图。

具体实现发方法有两种：

第一种：通过src引入一个html文件，显示对应的代码可以给这个文件传参实现动态显示数据。

第二种：自己手写一段html代码，使用ue提供的方法将html代码插入到富文本编辑器里面。

注意：如果采用第二种办法，必须把html片段里面的代码如果存在双引号，就需要把双引号替换为单引号，比如：

<p class="classA"></p> ==> <p class='classA'></p>
// 仅限于向iframe使用srcdoc属性

希望可以帮到大家