{"version":3,"sources":["webpack:///./src/docs/zh/editor/richtext.md"],"names":[],"mappings":"kHAAA,OAAe","file":"js/chunk-2d0d3876.9f236e4f.js","sourcesContent":["export default \"---\\r\\ntitle: 富文本\\r\\ntype: guide_editor\\r\\norder: 14\\r\\n---\\r\\n\\r\\n富文本与普通文本的区别在于：\\r\\n\\r\\n- 普通文本不支持交互，鼠标/触摸感应是关闭的；富文本支持。\\r\\n- 普通文本不支持链接和图文混排；富文本支持。\\r\\n- 普通文本不支持HTML语法（但可以使用UBB实现不同样式）；富文本支持。\\r\\n\\r\\n点击主工具栏中的按钮，生成一个富文本。\\r\\n\\r\\n## 实例属性\\r\\n\\r\\n\\r\\n\\r\\n-  设置文本支持UBB语法。使用UBB语法可以使单个文本包含多种样式，例如字体大小，颜色等。请参考[UBB语法](/docs/editor/text#ubb语法)。\\r\\n\\r\\n-  选中后，文本可以使用{count=100}这样的语法表达一个文本参数。请参考[文本模板](/docs/editor/text#文本模板)。\\r\\n\\r\\n-  设置文本为单行。单行文本不会自动换行，换行符也被忽略。\\r\\n\\r\\n-  设置文本为粗体。\\r\\n\\r\\n-  设置文本为斜体。\\r\\n\\r\\n-  设置文本为下划线。\\r\\n\\r\\n-  设置文本为删除线。注意，只有部分引擎支持。\\r\\n\\r\\n-  表示文本只用作编辑器预览用途，发布时将会自动清除。\\r\\n\\r\\n- `文本` 设置文本内容。富文本可直接使用[HTML语法](#HTML语法)。当需要换行时，在编辑器里可以**直接按回车**，或者使用html标签“<br/>”亦可。代码赋值需要换行可以用“\\\\n”。某些引擎，例如LayaAir，可能不支持回车符换行，可以使用<br/>试试。\\r\\n\\r\\n- `字体` 设置文字使用的字体。如果留空，表示使用全局设置字体（这时全局字体名称将以淡灰色显示）。详细请参考[字体](/docs/editor/font.html)。\\r\\n\\r\\n- `字体大小` 设置文字使用的字号。**如果使用的是位图字体，你需要对位图字体设置“允许动态改变字号”，这里的选项才有效。**\\r\\n\\r\\n- `颜色` 设置文字颜色。**如果使用的是位图字体，你需要对位图字体设置“允许动态改变颜色”，这里的选项才有效。**\\r\\n\\r\\n- `行距` 每行的像素间距。\\r\\n\\r\\n- `字距` 每个字符的像素间距。*（目前H5类引擎均不支持）*\\r\\n\\r\\n- `自动大小` \\r\\n - `自动宽度和高度` 文本不会自动换行，宽度和高度都增长到容纳全部文本。\\r\\n - `自动高度` 文本使用固定宽度排版，到达宽度后自动换行，高度增长到容纳全部文本。\\r\\n - `自动收缩` 文本使用固定宽度排版，到达宽度后文本自动缩小，使所有文本依然全部显示。如果内容宽度小于文本宽度，则不做任何处理。\\r\\n - `无` 文本使用固定宽度和高度排版，不会自动换行。\\r\\n\\r\\n- `对齐` 设置文本的对齐。\\r\\n\\r\\n- `描边` 设置文本的描边效果。描边粗细数值不能过大，否则效果会比较奇怪。描边在各个引擎实现的方式不同，效果也不同，编辑器的效果也仅供参考。\\r\\n\\r\\n- `投影` 设置文本的投影效果。投影效果可以看做是简化的描边效果，描边是所有方向，投影只有一个方向。投影和描边共用一个颜色设置。\\r\\n\\r\\n## GRichTextField\\r\\n\\r\\n富文本支持动态创建，例如：\\r\\n\\r\\n```csharp\\r\\n GRichTextField aRichTextField = new GRichTextField();\\r\\n aRichTextField.SetSize(100,100);\\r\\n aRichTextField.text = \\\"Hello World\\\";\\r\\n```\\r\\n\\r\\n侦听富文本中链接点击的方法是（这个事件是冒泡的，也就是你可以不在富文本上侦听，在它的父元件或者祖父元件上侦听都是可以的）：\\r\\n\\r\\n```csharp\\r\\n //Unity/Cry/MonoGame, EventContext里的data就是href值。\\r\\n aRichTextField.onClickLink.Add(onClickLink);\\r\\n\\r\\n //AS3/Egret，TextEvent.text就是href值。\\r\\n aRichTextField.addEventListener(TextEvent.LINK, onClickLink);\\r\\n\\r\\n //Egret，TextEvent.text就是href值。\\r\\n aRichTextField.addEventListener(TextEvent.LINK, this.onClickLink, this);\\r\\n\\r\\n //Laya, onClickLink的参数就是href值。\\r\\n aRichTextField.on(laya.events.Event.LINK,this,this.onClickLink);\\r\\n\\r\\n //Cocos2dx，EventContext.getDataValue().asString()就是href的值。\\r\\n aRichTextField->addEventListener(UIEventType::ClickLink, CC_CALLBACK_1(AClass::onClickLink, this));\\r\\n\\r\\n //CocosCreator，onClickLink的第一个参数就是href值，可选的第二个参数是fgui.Event\\r\\n aRichTextField.on(fgui.Event.LINK, this.onClickLink, this); \\r\\n```\\r\\n\\r\\n富文本最重要的功能是支持HTML解析和渲染。普通的文本样式标签，例如`FONT`、`B`、`I`、`U`这些一般都能很好的支持。其他一些对象标签，例如`A`、`IMG`等在各个引擎中支持的力度有所不同：\\r\\n\\r\\n- `AS3/Starling` 支持`A`标签和`IMG`标签，支持混排UI库里的图片/动画和外部图片。支持定制超级链接的样式：\\r\\n\\r\\n ```csharp\\r\\n aRichTextField.ALinkFormat = new TextFormat(...);\\r\\n aRichTextField.AHoverFormat = new TextFormat(...);\\r\\n ```\\r\\n\\r\\n- `Egret` 支持`A`标签。不支持图文混排。\\r\\n\\r\\n- `Laya` 支持`A`标签和`IMG`标签，只支持混排外部图片，**不支持UI库里的图片和动画**。Laya版本的GRichTextField的实质是包装了Laya的HTMLDivElement，可以通过以下方式访问：\\r\\n\\r\\n ```csharp\\r\\n var div:HtmlDivElement = aRichTextField.div;\\r\\n ```\\r\\n\\r\\n- `Unity` 支持`A`、`IMG`、`INPUT`、`SELECT`，`P`等。请参考[这里](#HTML语法)\\r\\n\\r\\n- `Cocos Creator` 支持 `A`、`IMG`。支持包里的和外部的图片，但不支持动画（动画显示成单帧）。Creator版本的GRichTextField的实质是包装了cc.RichText。\\r\\n\\r\\n## HTML语法\\r\\n\\r\\nUnity/MonoGame版本对HTML解析有比较完整的支持。\\r\\n\\r\\n- `IMG` 支持混排UI库里的图片/动画和外部(网络）图片。加载外部图片的能力可以通过[扩展Loader](/docs/editor/loader#GLoader)提供。注意，img标签需要使用“/>”结束，而不是“>”。例如：\\r\\n\\r\\n ```csharp\\r\\n 
\\r\\n\\r\\n //还可以指定图片的大小\\r\\n \\r\\n\\r\\n //还可以用百分比指定图片的大小\\r\\n \\r\\n ```\\r\\n\\r\\n- `A` 显示一个超级链接。例如：\\r\\n\\r\\n ```csharp\\r\\n link text\\r\\n ```\\r\\n\\r\\n 支持定义超级链接的样式。如果是全局修改，可以使用HtmlParseOptions的静态属性，例如：\\r\\n\\r\\n ```csharp\\r\\n //注意：全局设置应该在创建富文本之前调用。\\r\\n //设置整个项目中所有链接是否带下划线\\r\\n HtmlParseOptions.DefaultLinkUnderline = false;\\r\\n\\r\\n //设置超级链接的颜色\\r\\n HtmlParseOptions.DefaultLinkColor = ...;\\r\\n HtmlParseOptions.DefaultLinkBgColor = ...;\\r\\n HtmlParseOptions.DefaultLinkHoverBgColor = ...;\\r\\n ```\\r\\n\\r\\n 如果你只想定义单个富文本的链接样式，那么可以这样：\\r\\n\\r\\n ```csharp\\r\\n HtmlParseOptions options = aRichTextField.richTextField.htmlParseOptions;\\r\\n options.linkUnderline = false;\\r\\n options.linkColor = ...;\\r\\n options.linkBgColor = ...;\\r\\n options.linkHoverBgColor = ...;\\r\\n ```\\r\\n\\r\\n 如果同一个文本内的各个链接都需要不同颜色，那么在链接标签外围用颜色标签包住就行了。\\r\\n\\r\\n- `INPUT` 支持显示以下语法：\\r\\n\\r\\n ```csharp\\r\\n //显示一个按钮\\r\\n \\r\\n\\r\\n //显示一个输入框\\r\\n \\r\\n ```\\r\\n\\r\\n 如果需要显示按钮，需要先定义按钮对应的资源，否则无法显示。例如：\\r\\n\\r\\n ```csharp\\r\\n HtmlButton.resource = \\\"ui://包名/按钮名\\\";\\r\\n ```\\r\\n\\r\\n 对于输入框，可以定义输入框的边框颜色和边框大小，例如：\\r\\n\\r\\n ```csharp\\r\\n HtmlInput.defaultBorderSize = 2;\\r\\n HtmlInput.defaultBorderColor = ...;\\r\\n ```\\r\\n\\r\\n- `SELECT` 是使用该标签可以显示一个下拉选择框。例如：\\r\\n\\r\\n ```csharp\\r\\n \\r\\n ```\\r\\n\\r\\n 在使用下拉框前，需要先定义下拉框对应的资源，否则无法显示。例如：\\r\\n\\r\\n ```csharp\\r\\n HtmlSelect.resource = \\\"ui://包名/下拉框组件名\\\";\\r\\n ```\\r\\n\\r\\n- `P` 例如显示一张居中的图片：\\r\\n\\r\\n ```csharp\\r\\n ![]()
\\r\\n ```\\r\\n\\r\\n 默认情况下，GRichTextField将文本当做HTML片段处理，即对于空格、回车等空白字符是保留的。如果你希望当做完整的HTML处理，不保留空白，可以用以下几种方式：\\r\\n\\r\\n - 使用HtmlParseOptions：\\r\\n\\r\\n ```csharp\\r\\n HtmlParseOptions options = aRichTextField.richTextField.htmlParseOptions;\\r\\n options.ignoreWhiteSpace = true; \\r\\n ```\\r\\n\\r\\n - 将文本内容使用HTML或BODY标签包裹，例如：\\r\\n\\r\\n ```csharp\\r\\n aRichTextField.text = \\\"text \\\";\\r\\n ```\\r\\n\\r\\n如果要访问HTML中的对象，可以使用以下的方式：\\r\\n\\r\\n```csharp\\r\\n //当前文本中具有的HTML元素数量\\r\\n int cnt = aRichTextField.richTextField.htmlElementCount;\\r\\n\\r\\n //获得指定索引的HTML元素，0=