在文本中添加超链接

你可以使用富文本标签为编辑器UI或运行时添加文本的超链接。出于演示目的，此示例演示如何在自定义编辑器窗口中添加超链接。

示例概述

此示例创建一个包含三个超链接的自定义编辑器窗口。前两个链接是使用<link>使用链接 ID 的标记。第三个链接使用<a>标签加上href属性来定义目标。

第三个链接是使用<a>标签，该标记使用href属性来定义链接的目标。

这<link>标记是一个富文本标记，可用于在 UI Toolkit 中创建链接。使用<link>标记，如果需要创建许多链接或想要使用 C# 脚本定义自定义链接行为。

此示例使用以下事件来定义<link>标签逻辑：

注意：这些事件是实验性的，因此它们仍在变得足够稳定以发布的过程中。

• PointerDownLinkTag事件
• PointerUpLinkTagEvent
• PointerMoveLinkTagEvent
• PointerOutLinkTagEvent
• PointerOverLinkTag事件

您可以在此 GitHub 存储库中找到此示例创建的已完成文件。

先决条件

本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发人员。在开始之前，请熟悉以下内容：

• UI 生成器
• UXML的
• USS
• 富文本标记

创建示例

要使用 UI Toolkit 创建带有超链接的自定义编辑器窗口，请执行以下步骤：

1. 使用任何模板在 Unity 中创建项目。

2. 右键单击Assets文件夹，然后选择>编辑器窗口>创建 UI 工具包。

3. 在 UI Toolkit Editor Window Creator 中，输入LinkTag在 C# 字段中。

4. 选择确认。这会创建一个Editor文件夹，其中包含自定义窗口的 C# 脚本、UXML 和 USS 文件。

5. 双击LinkTag.uxml在 UI Builder 中打开它。

6. 在 UI 生成器中，选择第一个标签。

7. 将“文本”字段替换为以下内容：

   Link to <link="1"><color=#40a0ff><u>Unity</u></color></link>
   Link to <link="2"><color=#40a0ff><u>UITK Discussions</u></color></link>!
   

8. 启用启用富文本。

9. 选择“将样式类添加到列表”。

10. 进入link并按 Enter 键。这会添加一个linkclass 添加到第一个标签。

11. 选择第二个标签，并将文本字段替换为以下内容：

    Link to <a href="https://www.google.com/"><u>Google</u></a> using <noparse><a></noparse> tag.
    

12. 启用启用富文本。

13. 保存并关闭 UI 生成器。

14. 替换LinkTag.uss替换为以下内容：

    Label {
        font-size: 75px;
    }
        
    /*Turn the mouse pointer into a hand pointer when you hover over the link text.
      Note that the cursor override for the link value doesn’t work at runtime.*/
        
    .link-cursor {
        cursor: link;
    }
    

15. 替换LinkTag.cs替换为以下内容：

    using System.Collections.Generic;
    using UnityEditor;
    using UnityEngine;
    using UnityEngine.UIElements;
    using UnityEngine.UIElements.Experimental;
        
    public class LinkTag : EditorWindow
    {
        [SerializeField]
        private VisualTreeAsset m_VisualTreeAsset = default;
        
        [MenuItem("Window/LinkTag Sample")]
        public static void ShowExample()
        {
            LinkTag wnd = GetWindow<LinkTag>();
            wnd.titleContent = new GUIContent("LinkTag Sample");
        }
        
        readonly string linkCursorClassName = "link-cursor";
        Dictionary<int, string> m_UrlLookup;
        Label linkLabel;
        
        public void OnEnable()
        {
            // Use the dictionary to map link IDs to URLs.
            // The link ID is the number in the link tag, and the URL is the destination.
            // This is a simple example, in a real application you can define a more complex structure.
            m_UrlLookup = new Dictionary<int, string>()
            {
                { 1, "https://www.google.com/" },
                { 2, "https://discussions.unity.com/" }
            };
        }
        
        public void CreateGUI()
        {
            VisualElement uxml = m_VisualTreeAsset.Instantiate();
            rootVisualElement.Add(uxml);
        
            linkLabel = rootVisualElement.Q<Label>(className: "link");
        
            linkLabel.RegisterCallback<PointerDownLinkTagEvent>(HyperlinkOnPointerDown);
            linkLabel.RegisterCallback<PointerUpLinkTagEvent>(HyperlinkOnPointerUp);
            linkLabel.RegisterCallback<PointerMoveLinkTagEvent>(HyperlinkPointerMove);
            linkLabel.RegisterCallback<PointerOverLinkTagEvent>(HyperlinkOnPointerOver);
            linkLabel.RegisterCallback<PointerOutLinkTagEvent>(HyperlinkOnPointerOut);
        }
        
        void HyperlinkOnPointerOver(PointerOverLinkTagEvent _)
        {
            linkLabel.AddToClassList(linkCursorClassName);
        }
        void HyperlinkPointerMove(PointerMoveLinkTagEvent _) { }
        void HyperlinkOnPointerOut(PointerOutLinkTagEvent _)
        {
            linkLabel.RemoveFromClassList(linkCursorClassName);
        }
        
        void HyperlinkOnPointerDown(PointerDownLinkTagEvent _) { }
        
        void HyperlinkOnPointerUp(PointerUpLinkTagEvent evt)
        {
            var linkID = int.Parse(evt.linkID);
            if (m_UrlLookup.TryGetValue(linkID, out var url))
                Application.OpenURL(url);
        }
        
    }
    

测试链接

要验证链接是否有效，请执行以下步骤：

1. 从手册中，选择窗口> LinkTag 示例。
2. 选择自定义窗口中的链接以打开链接的网站。

其他资源

• 使用富文本标记设置文本样式
• 支持的富文本标记