安装

yarn add @pixui-dev/pixui-richtext-helper

使用

import { RichText } from "@pixui-dev/pixui-richtext-helper";

const richText; // 从管理端获取的富文本数据
const pixuiStyle = RichText.convertRichTextToPixuiStyle(richText);

<div
    style={{
        overflow: "scroll",
        flexDirection: "column",
    }}
    dangerouslySetInnerHTML={{ __html: pixuiStyle }} 
    /> // 使用富文本组件的返回结果

componentDidMount() { // 在节点渲染后绑定点击事件
    RichText.bindLinkClickEvents((params) => { //params提供以下信息：超链接节点类型、超链接内容、超链接节点id
        console.log("out click---------", params.type, params.href, params.id);
    });
}

注意

组件在转换长富文本（节点数量较多，参考节点数量大于100）的时候可能会比较慢阻塞活动显示，如果需要转换很长的富文本，建议询问管理端是否可以提供预转换服务，或者活动在前置虚拟机中预先转换以后保存到本地，活动中直接使用转换以后的结果。

组件当前只适配并测试过由floriazhang提供的管理端富文本编辑工具输出的富文本内容，除此之外的富文本内容不保证可以完全正确解析显示。

自定义节点样式

convertRichTextToPixuiStyle 在转换过程中会为特定节点增加 class 或 data-attribute，方便业务侧按需覆盖样式：

| 节点类型 | 标记 | 说明 | | --- | --- | --- | | 超链接文本（div） | .PA_RichTextHref_ATag | 原 a 标签被替换后的容器，可通过样式控制颜色、下划线等效果 | | 带超链接的图片（img） | .PA_RichTextHref_ImgTag | 图片本身存在跳转链接时添加 | | 所有图片（img） | .PA_RichTextImgTag | 富文本中的通用图片标记 | | 占位换行节点（div/span） | .pixui-richtext-br-placeholder | 连续 <br> 会被替换为透明字符占位，可调整段落之间的间距 | | 缩进节点（text-indent） | .pixui-richtext-indent-placeholder | text-indent 首行缩进处理 | | 列表条目容器（div） | data-list-item="true" | 每个列表项均带此属性，方便定制行距、缩进等 | | 超链接节点（任何） | id="PA_RichTextHrefId_xxx" | 与 bindLinkClickEvents 配合，可用 [id^="PA_RichTextHrefId_"] 选择 |

示例：

/* 修改超链接颜色及鼠标样式 */
.PA_RichTextHref_ATag {
  color: #1e90ff;
  cursor: pointer;
  text-decoration: underline;
}

/* 统一图片最大宽度 */
.PA_RichTextImgTag {
  max-width: 100%;
}

/* 调整列表行距 */
[data-list-item="true"] {
  line-height: 20px;
}

/* 自定义换行占位符大小 */
.pixui-richtext-br-placeholder {
  font-size: 12px;
}

/* 自定义缩进大小 */
.pixui-richtext-indent-placeholder {
  
}

版本更新记录

0.1.1-beta.5

1. 新增：防止重复转换

0.2.0

1. 组件默认样式长度单位修改为em
2. 图片节点统一补充PA_RichTextImgTag的class
3. 将列表的margin-left统一修改为padding-left
4. 修复某些情况下多余的span标签

0.2.1

1. 组件代码结构调整

0.2.2

1. 去掉某些节点默认的lineheight:1
2. 超链接改为直接在节点中记录数据，方便预加载流程在不同的环境调用convert和bind

0.2.3

1. line-height 的单位支持浮点数

0.2.4

1. 拆分margin中的margin-left转换为padding-left
2. 修复在嵌套节点中加br不会被拆成不同段落的问题

0.2.5

1. 修复img节点丢失的问题

0.2.6

1. 修复在超链接中添加转义符导致跳转信息不完整的问题
2. 修复带超链接的img节点中出现一些多余的属性
3. 增加将富文本中的px单位的属性统一替换为em单位的选项

0.2.7

1. 增加addCosUrlImageMogr2_w参数

0.2.8

1. 补充首行缩进占位符的class

0.2.9

1. 增加对class ql-direction-rtl -> style="direction: rtl;"的转换支持

0.2.10

1. 增加对class ql-align-right -> style="text-align: right;"的转换支持

0.2.11(f1dcaccc3b6c72b82b6b76cea654d50d5ba7ccad)

1. 修复图片原始尺寸和样式尺寸不一样，某些pixui版本尺寸不对的问题
2. 修复direction属性不生效的问题
3. text节点下的文本节点从div标签改为pixui推荐的key标签

0.2.13(7c5a966cba6a9b2d616e59f38dd23f997bc83cee)

1. 适配阿语从右到左的布局
2. 适配列表相关样式

0.2.14(f196abf819a64d9b762137512560261e1742c4d4)

1. 修复：段落缩进距离过长

0.2.19

1. 手动补充阿语空格，绕过pixui在阿语rtl节点下key节点内容不带阿语的时候有可能排版错误的问题

0.2.20

1. 直接填充透明占位符规避行内多个节点的时候空格被pixui trim的问题

0.2.21

1. 优化px转换为em的工具函数的性能