Статьи

Отображение текста HTML внутри меток Flex

Январь 21, 2018

Отображение html-содержимого внутри меток Flex не так просто, как в Flex 3, просто установив
свойство htmlText . Вот 3 элемента управления Spark, используемых для отображения текста:

  • Метка — только легкий текст
  • RichText — как следует из названия, он поддерживает расширенный текст.
    Также позволяет импортировать HTML-контент (теги привязки <a> не работают)
  • RichEditableText — обеспечивает ту же поддержку форматированного текста, что и элемент управления RichText.
    Позволяет редактировать и привязывать HTML-теги работать должным образом

Вот список
поддерживаемых тегов HTML :
<div>, <p>, <a>, <span>, <img>, <br> .

Как отмечалось выше, если вы хотите использовать якорные
теги <a> , вы должны использовать элемент
управления RichEditableText . В этом случае вы, скорее всего, захотите также установить
свойство editable = «false» .

Свойство anchor
href может быть установлено на относительный путь, например

<a href="index.html">index</a>

Или абсолютный как

<a href="http://google.com" target="_blank">google</a>

Обратите внимание, что вы можете установить
целевое свойство, чтобы контролировать, открывается ли ссылка в новом окне или нет.

Если вы хотите слушать, когда пользователь нажимает на якорь, это возможно, но требует гораздо больше работы. По сути, вы импортируете строку html в
объект TextFlow . Затем вы перебираете все дочерние элементы, пока не найдете
LinkElement (который представляет тег привязки), а затем добавляете
прослушиватель событий FlowElementMouseEvent.CLICK .

Вот пример кода, который я использую для достижения этой цели
:

/**
 * Converts the html string (from the resources) into a TextFlow object
 * using the TextConverter class. Then it iterates through all the 
 * elements in the TextFlow until it finds a LinkElement, and adds a 
 * FlowElementMouseEvent.CLICK event handler to that Link Element.
 */
public static function addLinkClickHandler(html:String, 
        linkClickedHandler:Function):TextFlow {
  var textFlow:TextFlow = TextConverter.importToFlow(html, 
    TextConverter.TEXT_FIELD_HTML_FORMAT);
  var link:LinkElement = findLinkElement(textFlow);
  if (link != null) {
    link.addEventListener(FlowElementMouseEvent.CLICK, 
          linkClickedHandler, false, 0, true);
  } else {
    trace("Warning - couldn't find link tag in: " + html);
  }
  return textFlow;
}

/**
 * Finds the first LinkElement recursively and returns it.
 */
private static function findLinkElement(group:FlowGroupElement):LinkElement {
  var childGroups:Array = [];
  // First check all the child elements of the current group,
  // Also save any children that are FlowGroupElement
  for (var i:int = 0; i < group.numChildren; i++) {
    var element:FlowElement = group.getChildAt(i);
    if (element is LinkElement) {
      return (element as LinkElement);
    } else if (element is FlowGroupElement) {
      childGroups.push(element);
    }
  }
  // Recursively check the child FlowGroupElements now
  for (i = 0; i < childGroups.length; i++) {
    var childGroup:FlowGroupElement = childGroups[i];
    var link:LinkElement = findLinkElement(childGroup);
    if (link != null) {
      return link;
    }
  }
  return null;
}

Простой элемент управления, который я часто создавал и использовал, называется
HtmlLabel, который расширяет
класс RichEditableText для обеспечения простой поддержки HTML-текста:

<?xml version="1.0" encoding="utf-8"?>
<s:RichEditableText xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  focusEnabled="false"
  selectable="false"
  editable="false">

  <fx:Script>
    <![CDATA[
      import flashx.textLayout.conversion.TextConverter;

      override public function set text(value:String):void {
        super.textFlow = TextConverter.importToFlow(value, 
          TextConverter.TEXT_FIELD_HTML_FORMAT);
      }
    ]]>
  </fx:Script>

</s:RichEditableText>

39
Share: