Laya 富文本 HtmlDivElement

参考
富文本：LayaAir下 HtmlDivElement的使用汇总
富文本HtmlDivElement的使用
HTML文本

1.简单的Html属性设置：Bold、Font、FontSize、Color、下划线
示例如下：

var div:HTMLDivElement=new HTMLDivElement();
div.innerHTML="<span style='font-weight:bold;" +
  "font:24px Arial' " +
  "color='red' " +
  "href='http://ask.layabox.com/www.baidu.com'>" +
  "LayaBox</span><span>欢迎你的加入</span>"
Laya.stage.addChild(div);

2、获取Html文本的实际内容、获取html文本的实际宽高（contextWidth、contextHeight）
示例如下：

var htmlDiv:HTMLDivElement=new HTMLDivElement();
var html:String = "<span color='#e3d26a'>使用</span>";
html += "<span style='color:#FFFFFF;font-weight:bold'>HTMLDivElement</span>";
html += "<span color='#6ad2e3'>创建的</span><br/>";
html += "<span color='#d26ae3'>HTML文本</span>";
htmlDiv.innerHTML=html;
htmlDiv.pos(50,200);
var txt:String = "";
var tTxt:String;
var tHTMLElement:HTMLElement;
for(var i:int = 0,n:int = htmlDiv._childs.length;i < n;i++)
{
tHTMLElement = htmlDiv.getChildAt(i) as HTMLElement;
if(tHTMLElement)
{
tTxt= tHTMLElement.text;
if(tTxt)
{
txt += tTxt;
}
}
}
trace("文本内容为"+txt);
trace("文本的实际宽度为"+htmlDiv.contextWidth,"文本的实际高度为"+htmlDiv.contextHeight)
Laya.stage.addChild(htmlDiv);

3、设置文本的水平居中对齐(align需要和width配合使用)，换行（
换行需要有行高）、空格（ ；）
【注意：目前不支持文本的垂直居中对齐，开发可以将（图片的高度-文本的高度）/2的值赋给文本的Y值，进行垂直居中对齐的替代设置】
示例如下：

var html3:HTMLDivElement=new HTMLDivElement();
html3.style.lineHeight=30;
html3.style.width=300;
html3.style.align="center";
html3.innerHTML="<br/><span>  我的第一行要换行</span>";
Laya.stage.addChild(html3);
 
var sp:Sprite=new Sprite();
sp.graphics.drawRect(0,0,300,30,null,"#999999");
Laya.stage.addChild(sp);

4、实现超链接
示例如下：

public function HtmlDemo()
{
var div:HTMLDivElement=new HTMLDivElement();
div.innerHTML="<span href='http://ask.layabox.com/'>LayaBox欢迎你的加入！</span>";
div.on(Event.LINK,this,onLink);
Laya.stage.addChild(div);
}
private function onLink(data:*):void
{
// TODO Auto Generated method stub
Browser.window.location.href=data;
}

5、实现html页面跳转
示例如下：

var iHtml:HTMLIframeElement=new HTMLIframeElement();
Laya.stage.addChild(iHtml);
iHtml.href="res/html/test.html";

6、简单的图片显示
示例如下：

var imageHtml:HTMLDivElement=new HTMLDivElement();
imageHtml.innerHTML="![](res/boy.png)</img>";
Laya.stage.addChild(imageHtml);

7、追加文本内容appendHtml
示例如下：

var appendHtml:HTMLDivElement=new HTMLDivElement();
appendHtml.innerHTML="<span>AAAAAA</span>";
Laya.stage.addChild(appendHtml);
appendHtml.appendHTML("<br/>  BBBBBBBBBB");
appendHtml.layout();

8、解决IOS手机上英文字母显示偏下的问题
在style样式中加垂直向上对齐valign：top属性
示例如下：

var html:HTMLDivElement=new HTMLDivElement();
html.innerHTML = "<span style='color:#ffffff;valign:top;'>朋友abc11''31ABC朋友</span>
<span href='http://www.baidu.com' target='_blank'>百度</span>";
Laya.stage.addChild(html);

总结：以上的方法仅供参考，某些方法只是实现方式的一种，开发者也可以通过其他方式进行设置，如果有哪些方法没有涉及到的，欢迎开发者提出来，我们会陆续进行补充！
9.换行
设置style.width会自动换行，手动换行需要在span标签后添加br
10.描边
参考HTMLDivElement文本字体描边怎么弄呢

div.innerHTML='<span style="stroke:2;strokeColor:#ffff00">hello</span>';

11.斜体
不支持

12.滚动条
参考建议官方针对HtmlDIVElement出和TextArea相关的功能
htmldivelement组件是没有滚动条的，它不具备输入功能，不能编辑，有点类似flash的htmltext文本可以实现富文本图文混排。textarea是支持滚动条的文本输入框，内容本身不能存在图片，不支持文本局部链接。
可以把htmldivelement放到一个容器里，然后把这个容器放到panel里，panel是支持滚动条的，这样可以通过内容的填充显示出滚动条！

13.参考示例

            var p:HTMLDivElement = new HTMLDivElement();
            Laya.stage.addChild(p);

            p.style.font = "Impact";
            p.style.fontSize = 30;

            var html:String = "<span color='#e3d26a'>使用</span>";
            html += "<span style='color:#FFFFFF;font-weight:bold'>HTMLDivElement</span>";
            html += "<span color='#6ad2e3'>创建的</span><br/>";
            html += "<span color='#d26ae3'>HTML文本</span>";
            
            p.innerHTML = html;