From 4b47ae1895d8298cd04e5db1ee6854d2391f6231 Mon Sep 17 00:00:00 2001
From: yinjiacheng <yinjiacheng@dcloud.io>
Date: Thu, 31 Aug 2023 20:59:35 +0800
Subject: [PATCH] =?UTF-8?q?=20=E6=96=B0=E5=A2=9Erich-text=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  18 +
 .../rich-text/rich-text-complex.uvue          |  34 ++
 pages/component/rich-text/rich-text-tags.uvue | 318 ++++++++++++++++++
 pages/component/rich-text/rich-text.uvue      |  39 +++
 pages/tabBar/component.uvue                   |   2 +-
 5 files changed, 410 insertions(+), 1 deletion(-)
 create mode 100644 pages/component/rich-text/rich-text-complex.uvue
 create mode 100644 pages/component/rich-text/rich-text-tags.uvue
 create mode 100644 pages/component/rich-text/rich-text.uvue

diff --git a/pages.json b/pages.json
index 3b43ed9f..90bf6566 100644
--- a/pages.json
+++ b/pages.json
@@ -55,6 +55,24 @@
       "style": {
         "navigationBarTitleText": "radio"
       }
+    },
+    {
+      "path": "pages/component/rich-text/rich-text",
+      "style": {
+        "navigationBarTitleText": "rich-text"
+      }
+    },
+    {
+      "path": "pages/component/rich-text/rich-text-tags",
+      "style": {
+        "navigationBarTitleText": "rich-text-tags"
+      }
+    },
+    {
+      "path": "pages/component/rich-text/rich-text-complex",
+      "style": {
+        "navigationBarTitleText": "rich-text-complex"
+      }
     },
     {
       "path": "pages/component/checkbox/checkbox",
diff --git a/pages/component/rich-text/rich-text-complex.uvue b/pages/component/rich-text/rich-text-complex.uvue
new file mode 100644
index 00000000..5df1bafb
--- /dev/null
+++ b/pages/component/rich-text/rich-text-complex.uvue
@@ -0,0 +1,34 @@
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view>
+    <!-- #endif -->
+    <view>
+      <page-head :title="title"></page-head>
+      <view class="uni-padding-wrap uni-common-mt">
+        <rich-text :nodes="htmlString" @itemclick="itemClick"></rich-text>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        title: 'rich-text-complex',
+        htmlString: '<p><a href="https://www.dcloud.io/hbuilderx.html">HBuilderX</a><br /><h1>HBuilderX，轻巧、极速，极客编辑器</h1><p style="color:red;"><small>HBuilderX，轻巧、极速，极客编辑器 </small><big>HBuilderX，轻巧、极速，极客编辑器</big><strong>HBuilderX，轻巧、极速，极客编辑器 </strong><i>HBuilderX，轻巧、极速，极客编辑器 </i><u>HBuilderX，轻巧、极速，极客编辑器</u><del>HBuilderX，轻巧、极速，极客编辑器</del></p><h2>uni-app x，终极跨平台方案</h2><p style="background-color: yellow;"><small>uni-app x，终极跨平台方案 </small><big>uni-app x，终极跨平台方案 </big><strong>uni-appx，终极跨平台方案 </strong><i>uni-app x，终极跨平台方案 </i><u>uni-app x，终极跨平台方案 </u><del>uni-app x，终极跨平台方案</del></p><h3>uniCloud，js serverless云服务</h3><p style="text-decoration: line-through;"><small>uniCloud，js serverless云服务 </small><big>uniCloud，js serverless云服务</big><strong>uniCloud，js serverless云服务 </strong><i>uniCloud，js serverless云服务 </i><u>uniCloud，js serverless云服务</u><del>uniCloud，js serverless云服务</del></p><h4>uts，大一统语言</h4><p style="text-align: center;"><small>uts，大一统语言 </small><big>uts，大一统语言 </big><strong>uts，大一统语言 </strong><i>uts，大一统语言</i><u>uts，大一统语言 </u><del>uts，大一统语言</del></p><h5>uniMPSdk，让你的App具备小程序能力</h5><h6>uni-admin，开源、现成的全端管理后台</h6><ul><li style="color: red; text-align: left;">uni-app x，终极跨平台方案</li><li style="color: green; text-align: center;">uni-app x，终极跨平台方案</li><li style="color: blue; text-align: right;">uni-app x，终极跨平台方案</li></ul><a href="https://uniapp.dcloud.net.cn">uni-app</a></p>'
+      }
+    },
+    methods: {
+      itemClick(e : RichTextItemClickEvent) {
+        console.log(JSON.stringify(e.detail));
+      }
+    }
+  }
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/component/rich-text/rich-text-tags.uvue b/pages/component/rich-text/rich-text-tags.uvue
new file mode 100644
index 00000000..72cc64a4
--- /dev/null
+++ b/pages/component/rich-text/rich-text-tags.uvue
@@ -0,0 +1,318 @@
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view>
+    <!-- #endif -->
+    <view>
+      <page-head :title="title"></page-head>
+      <view class="uni-padding-wrap uni-common-mt">
+        <view class="uni-title">
+          <text class="uni-title-text">支持的HTML标签</text>
+        </view>
+        <view class="uni-common-mt" v-for="(item,index) in data" :key="index">
+          <text class="uni-subtitle-text">{{item.name}}</text>
+          <view style="background:#FFFFFF;">
+            <rich-text :nodes="item.html" @itemclick="itemClick"></rich-text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        title: 'rich-text-tags',
+        data: [
+          {
+            name: '<br/>',
+            html: [
+              {
+                name: 'br',
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              },
+              {
+                name: 'br'
+              }
+            ] as Array<UTSJSONObject>
+          },
+          {
+            name: '<p/>',
+            html: [
+              {
+                name: 'p',
+                attrs: {
+                  style: 'text-align: center; text-decoration: line-through;'
+                },
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              },
+              {
+                name: 'p',
+                attrs: {
+                  style: 'background-color: green; color: red;'
+                },
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              }
+            ] as Array<UTSJSONObject>
+          },
+          {
+            name: '<ul/> <li/>',
+            html: [
+              {
+                name: 'ul',
+                children: [
+                  {
+                    name: 'li',
+                    attrs: {
+                      style: 'text-decoration: line-through; text-align: center;'
+                    },
+                    children: [
+                      {
+                        type: 'text',
+                        text: 'hello uni-app x'
+                      }
+                    ]
+                  },
+                  {
+                    name: 'li',
+                    attrs: {
+                      style: 'color: red; background-color: green; text-align: center;'
+                    },
+                    children: [
+                      {
+                        type: 'text',
+                        text: 'hello uni-app x'
+                      }
+                    ]
+                  }
+                ],
+              }
+            ] as Array<UTSJSONObject>
+          },
+          {
+            name: '<span/>',
+            html: [
+              {
+                name: 'span',
+                attrs: {
+                  style: 'color: red; background-color: green; text-decoration: line-through;'
+                },
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              }
+            ] as Array<UTSJSONObject>
+          },
+          {
+            name: '<strong/>',
+            html: [
+              {
+                name: 'strong',
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              }
+            ] as Array<UTSJSONObject>
+          },
+          {
+            name: '<i/>',
+            html: [
+              {
+                name: 'i',
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              }
+            ] as Array<UTSJSONObject>
+          },
+          {
+            name: '<big/>',
+            html: [
+              {
+                name: 'big',
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              }
+            ] as Array<UTSJSONObject>
+          },
+          {
+            name: '<small/>',
+            html: [
+              {
+                name: 'small',
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              }
+            ] as Array<UTSJSONObject>
+          },
+          {
+            name: '<a/>',
+            html: [
+              {
+                name: 'a',
+                attrs: {
+                  href: 'https://www.baidu.com'
+                },
+                children: [
+                  {
+                    type: 'text',
+                    text: '百度'
+                  }
+                ]
+              }
+            ] as Array<UTSJSONObject>
+          },
+          {
+            name: '<u/>',
+            html: [
+              {
+                name: 'u',
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              }
+            ] as Array<UTSJSONObject>
+          },
+          {
+            name: '<del/>',
+            html: [
+              {
+                name: 'del',
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              }
+            ] as Array<UTSJSONObject>
+          },
+          {
+            name: '<h1/> <h2/> <h3/> <h4/> <h5/> <h6/>',
+            html: [
+              {
+                name: 'h1',
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              },
+              {
+                name: 'h2',
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              },
+              {
+                name: 'h3',
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              },
+              {
+                name: 'h4',
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              },
+              {
+                name: 'h5',
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              },
+              {
+                name: 'h6',
+                children: [
+                  {
+                    type: 'text',
+                    text: 'hello uni-app x'
+                  }
+                ]
+              }
+            ] as Array<UTSJSONObject>
+          },
+          {
+            name: '<img/>',
+            html: [
+              {
+                name: 'img',
+                attrs: {
+                  src: 'https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
+                  width: '100px',
+                  height: '100px'
+                }
+              }
+            ] as Array<UTSJSONObject>
+          }
+        ] as Array<TagInfo>
+      }
+    },
+    methods: {
+      itemClick(e : RichTextItemClickEvent) {
+        console.log(JSON.stringify(e.detail));
+      }
+    }
+  }
+
+  type TagInfo = {
+    name : string,
+    html : Array<UTSJSONObject>
+  }
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/component/rich-text/rich-text.uvue b/pages/component/rich-text/rich-text.uvue
new file mode 100644
index 00000000..aa87af05
--- /dev/null
+++ b/pages/component/rich-text/rich-text.uvue
@@ -0,0 +1,39 @@
+<template>
+  <view>
+    <page-head :title="title"></page-head>
+    <view class="uni-padding-wrap uni-common-mt">
+      <view class="uni-btn-v">
+        <button type="primary" @tap="singleTag">rich-text渲染单个HTML标签示例</button>
+      </view>
+      <view class="uni-btn-v">
+        <button type="primary" @tap="complexTags">rich-text渲染复杂HTML示例</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        title: 'rich-text'
+      }
+    },
+    methods: {
+      singleTag() {
+        uni.navigateTo({
+          url: '/pages/component/rich-text/rich-text-tags'
+        });
+      },
+      complexTags() {
+        uni.navigateTo({
+          url: '/pages/component/rich-text/rich-text-complex'
+        });
+      }
+    }
+  }
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/tabBar/component.uvue b/pages/tabBar/component.uvue
index aefeac94..f5424ca3 100644
--- a/pages/tabBar/component.uvue
+++ b/pages/tabBar/component.uvue
@@ -110,7 +110,7 @@ export default {
             },
             {
               name: 'rich-text',
-              enable: false,
+              enable: true,
             },
             {
               name: 'progress',
-- 
GitLab