Laya的HTMLDivElement中的坑

使用laya中的HTMLDivElemet显示富文本，遇上不少的坑，总结一下，希望帮到需要的人。

1. <img>标签必须以<img></img>成对出现。

2. img的with、height不起作用，需要用style控制with和height。

3.img位置的对齐方式可以使用外套一个div解决。

4. P标签只有回车会出错，如：<p><br/></p>。

5. 嵌套的层次要一致，不然排版会错误，如

<span>Laya的HTMLDivElement中的<span style="color:red">坑</span></span>

这段内容会显示“坑Laya的HTMLDivElement中的”，因为“Laya的HTMLDivElement“只有一层span，“坑“有两层span，需要替换成

<span><span>Laya的HTMLDivElement中的</span><span style="color:red">坑</span></span>

才会显示正确的结果。

6. 不支持<storng>、 <em>等标签，需要使用style属性来代替，如

<strong>Laya的HTMLDivElement中的坑</strong>

需要替换成

<span style="bold: true;">Laya的HTMLDivElement中的坑</span>

7. 需要滚动显示HTMLDivElemet中的富文本，必须把HTMLDivElemet嵌套在滚动控件（如Panel）内，并设置高度。

this.htmlDivElemet.height = this.htmlDivElemet.contextHeight

在LayaAir 2.1.1.1上可能会遇上首次加载还是不对的情况，需要设置完之后调用Panel.refresh方法。

8. 有图片（IMG标签）的富文本，需要先分析内容，把需要的图片先加载，缓存起来，完成后在设置innerHTML，这样才能取得HTMLDivElemet正确的高度（contextHeight），示例代码片段如下：

//srcList: 图片src数组
function loadHtmlImgs(srcList, completed){
   const loaded = [];
   if(!srcList || srcList.length === 0){
      completed();
      return;
   }
   const onloaded = (tex, index) => {
      loaded.push(index);
      if(loaded.length === srcList.length){
         completed();
      }
   }
   srcList.forEach((src, i) => {
      const tex= Laya.Loader.getRes(src);
      if (!tex){
          tex = new Laya.Texture();
          tex.load(src);
          Laya.Loader.cacheRes(src, tex);
      }
      tex.getIsReady()? 
          onloaded(tex, i):
          tex.once(laya.events.Event.READY, this, () => onloaded(tex, i));
   });
}

function handleHtmlContextHeight(){
   this.htmlDivElemet.height = this.htmlDivElemet.contextHeight;
   this.panel.refresh();
}

loadHtmlImgs(srcList, _=>{
   this.htmlDivElemet.innerHTML = `xxx`;//xxx 具体富文本内容
   Laya.timer.once(1, this, handleHtmlContextHeight);
});

解决这八点，一个简单的富文本显示就没问题了，以上结果基于版本：LayaAir 2.1.1.1

PS：解决这些问题可能会使用到正则表达式，但是注意，iOS是不支持部分零宽断言的，需要用其他表达式代替