@pixui-dev/pixui-richtext-helper 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/RichText.d.ts +22 -0
- package/dist/RichText.js +24 -0
- package/dist/RichTextUtils.d.ts +6 -2
- package/dist/RichTextUtils.js +248 -73
- package/dist/index.d.ts +2 -2
- package/dist/index.js +4 -4
- package/dist/richtext/RichText_Refactor.d.ts +77 -0
- package/dist/richtext/RichText_Refactor.js +679 -0
- package/package.json +3 -3
- package/readme.md +52 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pixui-dev/pixui-richtext-helper",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "pixui richtext helper",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"author": "jnjnjnzhang",
|
|
20
20
|
"license": "ISC",
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@types/node": "^22.
|
|
23
|
-
"typescript": "^5.
|
|
22
|
+
"@types/node": "^22.15.33",
|
|
23
|
+
"typescript": "^5.8.3"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"cheerio": "1.0.0-rc.10"
|
package/readme.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
安装
|
|
2
2
|
|
|
3
3
|
```bash
|
|
4
|
-
yarn add pixui-richtext-helper
|
|
4
|
+
yarn add @pixui-dev/pixui-richtext-helper
|
|
5
5
|
```
|
|
6
6
|
|
|
7
7
|
使用
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
|
-
import { RichText } from "pixui-richtext-helper";
|
|
10
|
+
import { RichText } from "@pixui-dev/pixui-richtext-helper";
|
|
11
11
|
|
|
12
12
|
const richText; // 从管理端获取的富文本数据
|
|
13
13
|
const pixuiStyle = RichText.convertRichTextToPixuiStyle(richText);
|
|
@@ -26,3 +26,53 @@ componentDidMount() { // 在节点渲染后绑定点击事件
|
|
|
26
26
|
});
|
|
27
27
|
}
|
|
28
28
|
```
|
|
29
|
+
|
|
30
|
+
### 自定义节点样式
|
|
31
|
+
|
|
32
|
+
`convertRichTextToPixuiStyle` 在转换过程中会为特定节点增加 class 或 data-attribute，方便业务侧按需覆盖样式：
|
|
33
|
+
|
|
34
|
+
| 节点类型 | 标记 | 说明 |
|
|
35
|
+
| --- | --- | --- |
|
|
36
|
+
| 超链接文本（`div`） | `.PA_RichTextHref_ATag` | 原 `a` 标签被替换后的容器，可通过样式控制颜色、下划线等效果 |
|
|
37
|
+
| 带超链接的图片（`img`） | `.PA_RichTextHref_ImgTag` | 图片本身存在跳转链接时添加 |
|
|
38
|
+
| 所有图片（`img`） | `.PA_RichTextImgTag` | 富文本中的通用图片标记 |
|
|
39
|
+
| 占位换行节点（`div`/`span`） | `.pixui-richtext-br-placeholder` | 连续 `<br>` 会被替换为透明字符占位，可调整段落之间的间距 |
|
|
40
|
+
| 列表条目容器（`div`） | `data-list-item="true"` | 每个列表项均带此属性，方便定制行距、缩进等 |
|
|
41
|
+
| 超链接节点（任何） | `id="PA_RichTextHrefId_xxx"` | 与 `bindLinkClickEvents` 配合，可用 `[id^="PA_RichTextHrefId_"]` 选择 |
|
|
42
|
+
|
|
43
|
+
示例：
|
|
44
|
+
|
|
45
|
+
```css
|
|
46
|
+
/* 修改超链接颜色及鼠标样式 */
|
|
47
|
+
.PA_RichTextHref_ATag {
|
|
48
|
+
color: #1e90ff;
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
text-decoration: underline;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* 统一图片最大宽度 */
|
|
54
|
+
.PA_RichTextImgTag {
|
|
55
|
+
max-width: 100%;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* 调整列表行距 */
|
|
59
|
+
[data-list-item="true"] {
|
|
60
|
+
line-height: 20px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* 自定义换行占位符大小 */
|
|
64
|
+
.pixui-richtext-br-placeholder {
|
|
65
|
+
font-size: 12px;
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
版本更新记录
|
|
70
|
+
|
|
71
|
+
0.1.1-beta.5
|
|
72
|
+
1. 新增：防止重复转换
|
|
73
|
+
|
|
74
|
+
0.2.0
|
|
75
|
+
1. 组件默认样式长度单位修改为em
|
|
76
|
+
2. 图片节点统一补充PA_RichTextImgTag的class
|
|
77
|
+
3. 将列表的margin-left统一修改为padding-left
|
|
78
|
+
4. 修复某些情况下多余的span标签
|