@pixui-dev/pixui-richtext-helper 0.2.8 → 0.2.11

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.
@@ -1,4 +1,4 @@
1
- import { RichTextCore, LinkNodeType, LinkClickParams } from "./richtext/RichTextCore";
1
+ import { RichTextCore, LinkNodeType, LinkClickParams } from "./RichTextCore";
2
2
  /**
3
3
  * 对外暴露的 RichText 组件。
4
4
  * 保持旧版使用方式不变,内部委托给 RichText_Refactor 实现。
package/dist/RichText.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.LinkNodeType = exports.RichText = void 0;
4
- var RichTextCore_1 = require("./richtext/RichTextCore");
4
+ var RichTextCore_1 = require("./RichTextCore");
5
5
  Object.defineProperty(exports, "LinkNodeType", { enumerable: true, get: function () { return RichTextCore_1.LinkNodeType; } });
6
6
  /**
7
7
  * 对外暴露的 RichText 组件。
@@ -57,6 +57,8 @@ export declare class RichTextCore {
57
57
  private static convertAllPxToEm;
58
58
  private static preprocess;
59
59
  private static fixImgSizeUnit;
60
+ /** 合并 img 标签的 width 和 height 属性 */
61
+ private static consolidateImgSizeStyle;
60
62
  /** 给 COS 图片自动追加 imageMogr2/thumbnail 参数 */
61
63
  private static handleCosImageMogr2;
62
64
  /** 列表处理(将 ol/ul/li 替换为 div 结构) */
@@ -81,7 +83,7 @@ export declare class RichTextCore {
81
83
  private static convertSiblingTextToDiv;
82
84
  /** text-indent 首行缩进处理 */
83
85
  private static handleTextIndent;
84
- /** line-height / letter-spacing 调整 */
86
+ /** 处理 line-height / letter-spacing 属性 */
85
87
  private static adjustLineHeightAndLetterSpacing;
86
88
  /** 把 div 的 text-align 转移到子 text 上 */
87
89
  private static transferTextAlign;
@@ -15,23 +15,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
15
15
  }) : function(o, v) {
16
16
  o["default"] = v;
17
17
  });
18
- var __importStar = (this && this.__importStar) || (function () {
19
- var ownKeys = function(o) {
20
- ownKeys = Object.getOwnPropertyNames || function (o) {
21
- var ar = [];
22
- for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
- return ar;
24
- };
25
- return ownKeys(o);
26
- };
27
- return function (mod) {
28
- if (mod && mod.__esModule) return mod;
29
- var result = {};
30
- if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
- __setModuleDefault(result, mod);
32
- return result;
33
- };
34
- })();
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
35
25
  var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
36
26
  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
37
27
  if (ar || !(i in from)) {
@@ -52,7 +42,12 @@ var LinkNodeType;
52
42
  (function (LinkNodeType) {
53
43
  LinkNodeType["IMG"] = "img";
54
44
  LinkNodeType["DIV"] = "div";
55
- })(LinkNodeType || (exports.LinkNodeType = LinkNodeType = {}));
45
+ })(LinkNodeType = exports.LinkNodeType || (exports.LinkNodeType = {}));
46
+ var textNodeStyle = [
47
+ { key: "direction", isNumber: false },
48
+ { key: "line-height", isNumber: true },
49
+ { key: "letter-spacing", isNumber: true },
50
+ ];
56
51
  /*****************************************************
57
52
  * 工具函数
58
53
  *****************************************************/
@@ -133,6 +128,18 @@ var mergeStyles = function () {
133
128
  });
134
129
  return serializeStyleObject(mergedStyleObj);
135
130
  };
131
+ var CLASS_STYLE_MAP = {
132
+ "ql-direction-rtl": function (old) { return mergeStyles("direction: rtl;", old); },
133
+ "ql-align-right": function (old) { return mergeStyles("text-align: right;", old); },
134
+ };
135
+ var _loop_1 = function (i) {
136
+ var cls = "ql-indent-".concat(i);
137
+ CLASS_STYLE_MAP[cls] = function (old) { return mergeStyles("padding-left: ".concat(i * 2, "em"), old); };
138
+ };
139
+ // 动态生成段落缩进 ql-indent-1 ~ ql-indent-10
140
+ for (var i = 1; i <= 10; i++) {
141
+ _loop_1(i);
142
+ }
136
143
  /*****************************************************
137
144
  * RichTextCore 主类
138
145
  *****************************************************/
@@ -151,8 +158,9 @@ var RichTextCore = /** @class */ (function () {
151
158
  // 重置全局状态
152
159
  RichTextCore.linkNodes = [];
153
160
  RichTextCore.hrefIdCnt = 0;
154
- var preEncodedStr = str.replace(/href="([^"]*?)"/g, function (_match, hrefVal) {
155
- return "href=\"".concat(encodeURIComponent(hrefVal), "\"");
161
+ // href 属性先统一做 URI 编码
162
+ var preEncodedStr = str.replace(/href=(['"])(.*?)\1/g, function (_m, quote, hrefVal) {
163
+ return "href=".concat(quote).concat(encodeURIComponent(hrefVal)).concat(quote);
156
164
  });
157
165
  var $1 = cheerio.load(preEncodedStr, null, false);
158
166
  //检查html,如果有text节点,说明是转换过的,直接返回
@@ -325,6 +333,7 @@ var RichTextCore = /** @class */ (function () {
325
333
  this.preprocess($);
326
334
  this.fixImgSizeUnit($);
327
335
  this.handleCosImageMogr2($, config);
336
+ this.consolidateImgSizeStyle($);
328
337
  this.handleLists($, (config === null || config === void 0 ? void 0 : config.lineHeightScale) || 1);
329
338
  this.replaceBrWithPlaceholder($);
330
339
  this.handleAnchorTag($);
@@ -371,18 +380,29 @@ var RichTextCore = /** @class */ (function () {
371
380
  // 各独立处理步骤实现
372
381
  // ------------------------------
373
382
  RichTextCore.preprocess = function ($) {
374
- var _loop_1 = function (i) {
375
- var indent = "ql-indent-".concat(i);
376
- var extStyle = "padding-left: ".concat(i * 2, "em");
377
- $(".".concat(indent)).each(function () {
378
- var ori = $(this).attr("style") || "";
379
- $(this).attr("style", mergeStyles(ori, extStyle));
380
- $(this).removeClass(indent);
383
+ // 根据映射表统一处理 class style
384
+ $("*").each(function () {
385
+ var _this = this;
386
+ var classStr = $(this).attr("class") || "";
387
+ if (!classStr)
388
+ return;
389
+ var classArr = classStr.split(/\s+/).filter(Boolean);
390
+ if (classArr.length === 0)
391
+ return;
392
+ var styleStr = $(this).attr("style") || "";
393
+ var changed = false;
394
+ classArr.forEach(function (cls) {
395
+ var mapper = CLASS_STYLE_MAP[cls];
396
+ if (mapper) {
397
+ styleStr = mapper(styleStr, $(_this));
398
+ $(_this).removeClass(cls);
399
+ changed = true;
400
+ }
381
401
  });
382
- };
383
- for (var i = 1; i <= 10; i++) {
384
- _loop_1(i);
385
- }
402
+ if (changed) {
403
+ $(this).attr("style", styleStr);
404
+ }
405
+ });
386
406
  // 在所有标题标签后插入换行 <br>
387
407
  $("h1, h2, h3, h4, h5, h6").each(function () {
388
408
  // 若标题后紧跟已有换行则不再追加
@@ -450,6 +470,31 @@ var RichTextCore = /** @class */ (function () {
450
470
  }
451
471
  });
452
472
  };
473
+ /** 合并 img 标签的 width 和 height 属性 */
474
+ RichTextCore.consolidateImgSizeStyle = function ($) {
475
+ $("img").each(function () {
476
+ var _this = this;
477
+ var styleObj = parseStyleString($(this).attr("style") || "");
478
+ var handleAttr = function (attrName) {
479
+ var attrVal = $(_this).attr(attrName);
480
+ if (!attrVal)
481
+ return;
482
+ var valStr = attrVal.trim();
483
+ if (/^\d+$/.test(valStr)) {
484
+ // 数字补 px
485
+ valStr = "".concat(valStr, "px");
486
+ }
487
+ // 若 style 中已存在同键,则以 style 内优先
488
+ if (!styleObj[attrName]) {
489
+ styleObj[attrName] = valStr;
490
+ }
491
+ $(_this).removeAttr(attrName);
492
+ };
493
+ handleAttr("width");
494
+ handleAttr("height");
495
+ $(this).attr("style", serializeStyleObject(styleObj));
496
+ });
497
+ };
453
498
  /** 给 COS 图片自动追加 imageMogr2/thumbnail 参数 */
454
499
  RichTextCore.handleCosImageMogr2 = function ($, config) {
455
500
  var maxW = config === null || config === void 0 ? void 0 : config.addCosUrlImageMogr2_w;
@@ -580,8 +625,8 @@ var RichTextCore = /** @class */ (function () {
580
625
  "flex-direction: row",
581
626
  "display: flex"], false)), "\" data-list-item=\"true\">") +
582
627
  "<text style=\"".concat(mergeStyles("flex-shrink: 0", "width: 100%", "display: flex", "flex-direction: row"), "\">") +
583
- "<div style=\"".concat(mergeStyles("word-break: break-word", "flex-shrink: 0", "padding-right: 0.5em"), "\">").concat(it.marker, "</div>") +
584
- "<div style=\"".concat(mergeStyles("word-break: break-word", "flex-shrink: 0", "flex: 1"), "\">").concat(it.textContent, "</div>") +
628
+ "<key style=\"".concat(mergeStyles("flex-shrink: 0", "padding-right: 0.5em"), "\">").concat(it.marker, "</key>") +
629
+ "<key style=\"".concat(mergeStyles("flex-shrink: 0", "flex: 1"), "\">").concat(it.textContent, "</key>") +
585
630
  "</text></div>");
586
631
  })
587
632
  .join("");
@@ -653,7 +698,7 @@ var RichTextCore = /** @class */ (function () {
653
698
  if (this.type === "text") {
654
699
  var text = this.data.trim();
655
700
  if (text.length > 0) {
656
- $(this).replaceWith("<text style=\"".concat(mergeStyles("word-break: break-word", "flex-shrink: 0", "flex-direction: row"), "\">").concat(text, "</text>"));
701
+ $(this).replaceWith("<text style=\"".concat(mergeStyles("flex-shrink: 0", "flex-direction: row"), "\">").concat(text, "</text>"));
657
702
  }
658
703
  }
659
704
  });
@@ -774,19 +819,29 @@ var RichTextCore = /** @class */ (function () {
774
819
  var inListItem = $(this).closest("[data-list-item='true']").length > 0;
775
820
  if (inListItem)
776
821
  return;
777
- var text = $(this).html();
778
822
  var style = $(this).attr("style") || "";
779
- // 检查是否包含link节点
780
- var hasLink = $(this).find('[id^="PA_RichTextHrefId_"]').length > 0;
781
- if (hasLink) {
782
- // 如果包含link节点,需要特殊处理以保持link在正确位置
783
- var $tempDiv = $("<div style=\"".concat(mergeStyles(style, "word-break: break-word", "flex-shrink: 0", "flex-direction: row"), "\">").concat(text, "</div>"));
784
- $(this).replaceWith($tempDiv);
785
- }
786
- else {
787
- // 普通text节点直接转换
788
- $(this).replaceWith("<div style=\"".concat(mergeStyles(style, "word-break: break-word", "flex-shrink: 0", "flex-direction: row"), "\">").concat(text, "</div>"));
789
- }
823
+ var keyStyle = mergeStyles(style, "flex-shrink: 0");
824
+ var fragments = [];
825
+ $(this)
826
+ .contents()
827
+ .each(function () {
828
+ // 纯文本 → 包进 key
829
+ if (this.type === "text") {
830
+ var txt = this.data;
831
+ if (txt && txt.trim()) {
832
+ fragments.push("<key style=\"".concat(keyStyle, "\">").concat(txt, "</key>"));
833
+ }
834
+ else {
835
+ // 保留空白字符
836
+ fragments.push(txt);
837
+ }
838
+ }
839
+ else {
840
+ // 其它节点(img、link等)保持原样
841
+ fragments.push($.html(this));
842
+ }
843
+ });
844
+ $(this).replaceWith(fragments.join(""));
790
845
  });
791
846
  var tagHtml = $(node).html() || "";
792
847
  var tagStyle = $(node).attr("style") || "";
@@ -813,7 +868,7 @@ var RichTextCore = /** @class */ (function () {
813
868
  if (textIndent) {
814
869
  var repeatCnt = parseInt(textIndent);
815
870
  if (repeatCnt > 0) {
816
- var spacer = "<div style=\"".concat(mergeStyles("color: transparent", "flex-shrink: 0", "font-size: 16px"), "\" class='pixui-richtext-indent-placeholder'>").concat("一".repeat(repeatCnt), "</div>");
871
+ var spacer = "<div style=\"".concat(mergeStyles("color: transparent", "flex-shrink: 0", "font-size: 1em"), "\" class='pixui-richtext-indent-placeholder'>").concat("一".repeat(repeatCnt), "</div>");
817
872
  var textChild = $(this).children("text").first();
818
873
  if (textChild.length > 0) {
819
874
  var first = textChild.children().first();
@@ -826,66 +881,85 @@ var RichTextCore = /** @class */ (function () {
826
881
  }
827
882
  });
828
883
  };
829
- /** line-height / letter-spacing 调整 */
884
+ /** 处理 line-height / letter-spacing 属性 */
830
885
  RichTextCore.adjustLineHeightAndLetterSpacing = function ($, config) {
886
+ var stylesToHandle = textNodeStyle;
831
887
  $("text").each(function () {
832
888
  var $text = $(this);
833
- var maxLineHeightVal = 0;
834
- var lineHeightUnit = "";
835
- $text.children("div").each(function () {
836
- var lhRaw = ($(this).css("line-height") || "").trim();
837
- var match = lhRaw.match(/^([0-9.]+)([a-z%]*)$/i);
838
- if (match) {
839
- var val = parseFloat(match[1]);
840
- if (!isNaN(val)) {
841
- maxLineHeightVal = Math.max(maxLineHeightVal, val);
889
+ stylesToHandle.forEach(function (_a) {
890
+ var key = _a.key, isNumber = _a.isNumber;
891
+ var aggregatedNumber = -Infinity; // for max comparison
892
+ var unit = "";
893
+ var chosenValue;
894
+ $text.children("div, key").each(function () {
895
+ var styleObj = parseStyleString($(this).attr("style") || "");
896
+ var valRaw = styleObj[key];
897
+ if (valRaw !== undefined) {
898
+ if (isNumber) {
899
+ var match = valRaw.trim().match(/^([0-9.]+)([a-z%]*)$/i);
900
+ if (match) {
901
+ var numVal = parseFloat(match[1]);
902
+ if (!isNaN(numVal) && numVal > aggregatedNumber) {
903
+ aggregatedNumber = numVal;
904
+ unit = match[2] || unit;
905
+ }
906
+ }
907
+ }
908
+ else {
909
+ if (chosenValue === undefined) {
910
+ chosenValue = valRaw;
911
+ }
912
+ }
913
+ // 移除子节点上该样式
914
+ delete styleObj[key];
915
+ $(this).attr("style", serializeStyleObject(styleObj));
842
916
  }
843
- if (!lineHeightUnit && match[2])
844
- lineHeightUnit = match[2];
917
+ });
918
+ // 将聚合结果写入父 text
919
+ var currentStyle = $text.attr("style") || "";
920
+ if (isNumber && aggregatedNumber !== -Infinity) {
921
+ var finalVal = aggregatedNumber;
922
+ // line-height 需要乘以 scale
923
+ if (key === "line-height") {
924
+ var scale = (config === null || config === void 0 ? void 0 : config.lineHeightScale) || 1;
925
+ finalVal = aggregatedNumber * scale;
926
+ }
927
+ var finalUnit = unit || (key === "letter-spacing" ? "em" : "");
928
+ $text.attr("style", mergeStyles(currentStyle, "".concat(key, ": ").concat(finalVal).concat(finalUnit)));
845
929
  }
846
- if (lhRaw) {
847
- var styleObj = parseStyleString($(this).attr("style") || "");
848
- delete styleObj["line-height"];
849
- $(this).attr("style", serializeStyleObject(styleObj));
930
+ else if (!isNumber && chosenValue !== undefined) {
931
+ $text.attr("style", mergeStyles(currentStyle, "".concat(key, ": ").concat(chosenValue)));
850
932
  }
851
933
  });
852
- var scale = (config === null || config === void 0 ? void 0 : config.lineHeightScale) || 1;
853
- if (maxLineHeightVal > 0) {
854
- var currentStyle = $text.attr("style") || "";
855
- $text.attr("style", mergeStyles(currentStyle, "line-height: ".concat(maxLineHeightVal * scale).concat(lineHeightUnit)));
856
- }
857
- });
858
- $("text").each(function () {
859
- var $text = $(this);
860
- var maxLS = 0;
861
- $text.children("div").each(function () {
862
- var ls = $(this).css("letter-spacing") || "0";
863
- var lsNum = parseInt(ls);
864
- maxLS = Math.max(maxLS, lsNum);
865
- });
866
- if (maxLS > 0) {
867
- var currentStyle = $text.attr("style") || "";
868
- $text.attr("style", mergeStyles(currentStyle, "letter-spacing: ".concat(maxLS, "em")));
869
- }
870
934
  });
871
935
  };
872
936
  /** 把 div 的 text-align 转移到子 text 上 */
873
937
  RichTextCore.transferTextAlign = function ($) {
874
938
  $("div").each(function () {
875
- var ta = $(this).css("text-align") || "";
876
- if (ta) {
877
- $(this)
878
- .children("text")
879
- .each(function () {
880
- var currentStyle = $(this).attr("style") || "";
881
- $(this).attr("style", mergeStyles(currentStyle, "text-align: ".concat(ta)));
939
+ var styleObj = parseStyleString($(this).attr("style") || "");
940
+ var keysToTransfer = ["text-align", "direction"];
941
+ var transferVals = {};
942
+ keysToTransfer.forEach(function (k) {
943
+ if (styleObj[k] !== undefined) {
944
+ transferVals[k] = styleObj[k];
945
+ delete styleObj[k];
946
+ }
947
+ });
948
+ if (Object.keys(transferVals).length === 0)
949
+ return;
950
+ // 写回 div 剩余 style
951
+ $(this).attr("style", serializeStyleObject(styleObj));
952
+ // 传递到子 text
953
+ $(this)
954
+ .children("text")
955
+ .each(function () {
956
+ var current = $(this).attr("style") || "";
957
+ Object.entries(transferVals).forEach(function (_a) {
958
+ var k = _a[0], v = _a[1];
959
+ current = mergeStyles(current, "".concat(k, ": ").concat(v));
882
960
  });
883
- // 清除div的text-align
884
- var currentStyle = $(this).attr("style") || "";
885
- var styleObj = parseStyleString(currentStyle);
886
- delete styleObj["text-align"];
887
- $(this).attr("style", serializeStyleObject(styleObj));
888
- }
961
+ $(this).attr("style", current);
962
+ });
889
963
  });
890
964
  };
891
965
  /** 删除空 text 节点 */
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
- const { RichText } = require("./dist/index");
2
-
3
- module.exports = {
4
- RichText,
5
- };
1
+ const { RichText } = require("./dist/index");
2
+
3
+ module.exports = {
4
+ RichText,
5
+ };
package/package.json CHANGED
@@ -1,28 +1,28 @@
1
- {
2
- "name": "@pixui-dev/pixui-richtext-helper",
3
- "version": "0.2.8",
4
- "description": "pixui richtext helper",
5
- "main": "dist/index.js",
6
- "types": "dist/index.d.ts",
7
- "files": [
8
- "dist/**/*",
9
- "index.js",
10
- "readme.md"
11
- ],
12
- "scripts": {
13
- "test": "echo \"Error: no test specified\" && exit 1",
14
- "build": "rm -rf dist && tsc"
15
- },
16
- "publishConfig": {
17
- "access": "public"
18
- },
19
- "author": "jnjnjnzhang",
20
- "license": "ISC",
21
- "devDependencies": {
22
- "@types/node": "^22.15.33",
23
- "typescript": "^5.8.3"
24
- },
25
- "dependencies": {
26
- "cheerio": "1.0.0-rc.10"
27
- }
1
+ {
2
+ "name": "@pixui-dev/pixui-richtext-helper",
3
+ "version": "0.2.11",
4
+ "description": "pixui richtext helper",
5
+ "main": "dist/index.js",
6
+ "types": "dist/index.d.ts",
7
+ "files": [
8
+ "dist/**/*",
9
+ "index.js",
10
+ "readme.md"
11
+ ],
12
+ "scripts": {
13
+ "test": "echo \"Error: no test specified\" && exit 1",
14
+ "build": "rm -rf dist && tsc"
15
+ },
16
+ "publishConfig": {
17
+ "access": "public"
18
+ },
19
+ "author": "jnjnjnzhang",
20
+ "license": "ISC",
21
+ "devDependencies": {
22
+ "@types/node": "^22.15.33",
23
+ "typescript": "^5.8.3"
24
+ },
25
+ "dependencies": {
26
+ "cheerio": "1.0.0-rc.10"
27
+ }
28
28
  }
package/readme.md CHANGED
@@ -28,6 +28,7 @@ componentDidMount() { // 在节点渲染后绑定点击事件
28
28
  ```
29
29
 
30
30
  ## 注意
31
+
31
32
  组件在转换长富文本(节点数量较多,参考节点数量大于100)的时候可能会比较慢阻塞活动显示,如果需要转换很长的富文本,建议询问管理端是否可以提供预转换服务,或者活动在前置虚拟机中预先转换以后保存到本地,活动中直接使用转换以后的结果。
32
33
 
33
34
  ### 自定义节点样式
@@ -77,36 +78,62 @@ componentDidMount() { // 在节点渲染后绑定点击事件
77
78
 
78
79
  版本更新记录
79
80
 
80
- 0.1.1-beta.5
81
+ 0.1.1-beta.5
82
+
81
83
  1. 新增:防止重复转换
82
84
 
83
85
  0.2.0
86
+
84
87
  1. 组件默认样式长度单位修改为em
85
88
  2. 图片节点统一补充PA_RichTextImgTag的class
86
89
  3. 将列表的margin-left统一修改为padding-left
87
90
  4. 修复某些情况下多余的span标签
88
91
 
89
92
  0.2.1
93
+
90
94
  1. 组件代码结构调整
91
95
 
92
96
  0.2.2
97
+
93
98
  1. 去掉某些节点默认的lineheight:1
94
99
  2. 超链接改为直接在节点中记录数据,方便预加载流程在不同的环境调用convert和bind
95
100
 
96
101
  0.2.3
102
+
97
103
  1. line-height 的单位支持浮点数
98
104
 
99
105
  0.2.4
106
+
100
107
  1. 拆分margin中的margin-left转换为padding-left
101
108
  2. 修复在嵌套节点中加br不会被拆成不同段落的问题
102
109
 
103
110
  0.2.5
111
+
104
112
  1. 修复img节点丢失的问题
105
113
 
106
114
  0.2.6
115
+
107
116
  1. 修复在超链接中添加转义符导致跳转信息不完整的问题
108
117
  2. 修复带超链接的img节点中出现一些多余的属性
109
118
  3. 增加将富文本中的px单位的属性统一替换为em单位的选项
110
119
 
111
120
  0.2.7
112
- 1. 增加addCosUrlImageMogr2_w参数
121
+
122
+ 1. 增加addCosUrlImageMogr2_w参数
123
+
124
+ 0.2.8
125
+
126
+ 1. 补充首行缩进占位符的class
127
+
128
+ 0.2.9
129
+
130
+ 1. 增加对class ql-direction-rtl -> style="direction: rtl;"的转换支持
131
+
132
+ 0.2.10
133
+
134
+ 1. 增加对class ql-align-right -> style="text-align: right;"的转换支持
135
+
136
+ 0.2.11
137
+
138
+ 1. 修复图片原始尺寸和样式尺寸不一样,某些pixui版本尺寸不对的问题
139
+ 2. 修复direction属性不生效的问题
@@ -1,41 +0,0 @@
1
- /**
2
- * pixui富文本转换工具
3
- * 将管理端下发的富文本转换成pixui的innerHtml可以使用的格式,被转换的富文本只应该包括文本和图片及相关的样式。
4
- * 将富文本内容转换为:
5
- * 段落div/h节点(不带样式,用来形成一个段落) -> text(只带text节点样式,pixui的段落需要在text节点下才能表现正常)-> <div>(带有文本的样式) 文本1 </div> <div>(带有文本的样式) 文本2 </div> <img>(带有图片的样式) 图片1 </img> <div>(带有文本的样式) 文本3 </div> (每个子div带有这一小段文本/图片的样式,这一段所有text节点下的div/img会被text节点正确的换行排列)
6
- */
7
- export declare namespace RichText {
8
- /**
9
- * 富文本中的超链接节点类型
10
- */
11
- enum LinkNodeType {
12
- IMG = "img",
13
- DIV = "div"
14
- }
15
- /**
16
- * 富文本超链接点击回调参数
17
- */
18
- interface LinkClickParams {
19
- /** 节点类型 */
20
- type: LinkNodeType;
21
- /** 原始href内容 */
22
- href: string;
23
- /** 节点id */
24
- id: string;
25
- }
26
- /**
27
- * 富文本组件,将富文本转换成pixui的innerHtml可以使用的格式
28
- * @param str 管理端下发的富文本
29
- * @param config 配置
30
- * @param config.lineHeightScale 行高缩放
31
- * @returns pixui的innerHtml可以使用的格式
32
- */
33
- const convertRichTextToPixuiStyle: (str: string, config?: {
34
- lineHeightScale?: number;
35
- }) => string;
36
- /**
37
- * 为富文本中的链接节点绑定点击事件
38
- * @param linkClickHandler 点击事件回调函数
39
- */
40
- const bindLinkClickEvents: (linkClickHandler: (params: LinkClickParams) => void) => void;
41
- }
@@ -1,533 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || (function () {
19
- var ownKeys = function(o) {
20
- ownKeys = Object.getOwnPropertyNames || function (o) {
21
- var ar = [];
22
- for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
- return ar;
24
- };
25
- return ownKeys(o);
26
- };
27
- return function (mod) {
28
- if (mod && mod.__esModule) return mod;
29
- var result = {};
30
- if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
- __setModuleDefault(result, mod);
32
- return result;
33
- };
34
- })();
35
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
36
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
37
- if (ar || !(i in from)) {
38
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
39
- ar[i] = from[i];
40
- }
41
- }
42
- return to.concat(ar || Array.prototype.slice.call(from));
43
- };
44
- Object.defineProperty(exports, "__esModule", { value: true });
45
- exports.RichText = void 0;
46
- var cheerio = __importStar(require("cheerio"));
47
- /**
48
- * pixui富文本转换工具
49
- * 将管理端下发的富文本转换成pixui的innerHtml可以使用的格式,被转换的富文本只应该包括文本和图片及相关的样式。
50
- * 将富文本内容转换为:
51
- * 段落div/h节点(不带样式,用来形成一个段落) -> text(只带text节点样式,pixui的段落需要在text节点下才能表现正常)-> <div>(带有文本的样式) 文本1 </div> <div>(带有文本的样式) 文本2 </div> <img>(带有图片的样式) 图片1 </img> <div>(带有文本的样式) 文本3 </div> (每个子div带有这一小段文本/图片的样式,这一段所有text节点下的div/img会被text节点正确的换行排列)
52
- */
53
- var RichText;
54
- (function (RichText) {
55
- /**
56
- * 富文本中的超链接节点类型
57
- */
58
- var LinkNodeType;
59
- (function (LinkNodeType) {
60
- LinkNodeType["IMG"] = "img";
61
- LinkNodeType["DIV"] = "div";
62
- })(LinkNodeType = RichText.LinkNodeType || (RichText.LinkNodeType = {}));
63
- // 存储需要绑定点击事件的节点信息
64
- var linkNodes = [];
65
- // 添加工具函数来正确处理CSS样式拼接
66
- var mergeStyles = function () {
67
- var styles = [];
68
- for (var _i = 0; _i < arguments.length; _i++) {
69
- styles[_i] = arguments[_i];
70
- }
71
- return styles
72
- .filter(function (style) { return style && style.trim(); })
73
- .map(function (style) {
74
- var trimmed = style.trim();
75
- return trimmed.endsWith(";") ? trimmed : trimmed + ";";
76
- })
77
- .join(" ")
78
- .replace(/\s*;\s*$/, ";"); // 确保最后只有一个分号
79
- };
80
- /**
81
- * 富文本组件,将富文本转换成pixui的innerHtml可以使用的格式
82
- * @param str 管理端下发的富文本
83
- * @param config 配置
84
- * @param config.lineHeightScale 行高缩放
85
- * @returns pixui的innerHtml可以使用的格式
86
- */
87
- RichText.convertRichTextToPixuiStyle = function (str, config) {
88
- //将富文本内容转换为一个 段落div/h -> text -> 文字样式div/img -> 文本 的结构,保证pixui可以正常显示
89
- var $ = cheerio.load(str, null, false);
90
- var hrefIdCnt = 0;
91
- linkNodes = []; // 重置链接节点信息
92
- // 节点处理
93
- {
94
- var _loop_1 = function (i) {
95
- var indent = "ql-indent-".concat(i);
96
- var extStyle = "padding-left: ".concat(i * 2, "rem");
97
- $(".".concat(indent)).each(function () {
98
- var oriStyle = $(this).attr("style") || "";
99
- $(this).attr("style", mergeStyles(oriStyle, extStyle));
100
- $(this).removeClass(indent);
101
- });
102
- };
103
- //合并ql-indent class到style中
104
- for (var i = 1; i <= 10; i++) {
105
- _loop_1(i);
106
- }
107
- $("img").each(function () {
108
- //给纯数字的width,height添加px单位
109
- var width = $(this).attr("width");
110
- var height = $(this).attr("height");
111
- if (width && width + "" == parseInt(width) + "") {
112
- $(this).attr("width", "".concat(width, "px"));
113
- }
114
- if (height && height + "" == parseInt(height) + "") {
115
- $(this).attr("height", "".concat(height, "px"));
116
- }
117
- });
118
- // 处理列表项
119
- {
120
- /**
121
- * pixui不支持ol,ul,li节点,将其递归转换成div并处理嵌套层级
122
- * 记录每个列表容器的位置,在原位置插入转换后的结构
123
- */
124
- // 第一步:找到所有顶层列表容器并标记其位置
125
- var topLevelLists_1 = [];
126
- // 递归收集列表项的函数
127
- var collectListItems_1 = function ($container, currentLevel) {
128
- if (currentLevel === void 0) { currentLevel = 0; }
129
- var items = [];
130
- $container.children().each(function () {
131
- var $child = $(this);
132
- if ($child.is("li")) {
133
- var isOrdered = $child.parent().is("ol");
134
- var orderIndex = 1;
135
- if (isOrdered) {
136
- // 计算在同一个ol中的序号
137
- orderIndex = $child.prevAll("li").length + 1;
138
- }
139
- // 生成marker
140
- var marker = isOrdered ? "".concat(orderIndex, ".") : "•";
141
- // 计算缩进
142
- var paddingLeft = currentLevel * 2; // 每层缩进2rem
143
- // 获取li的直接文本内容,不包括嵌套的子列表
144
- var $liClone = $child.clone();
145
- $liClone.find("ol, ul").remove();
146
- var textContent = $liClone.text().trim() || "";
147
- var style = $child.attr("style") || "";
148
- items.push({
149
- level: currentLevel,
150
- isOrdered: isOrdered,
151
- orderIndex: orderIndex,
152
- marker: marker,
153
- paddingLeft: paddingLeft,
154
- textContent: textContent,
155
- style: style,
156
- });
157
- // 递归处理li内的子列表(只处理真正嵌套在当前li内的列表)
158
- $child.find("ol, ul").each(function () {
159
- // 确保这个列表是当前li的直接子元素,而不是更深层的
160
- var $nestedList = $(this);
161
- if ($nestedList.parent().closest("li")[0] === $child[0]) {
162
- var childItems = collectListItems_1($nestedList, currentLevel + 1);
163
- items.push.apply(items, childItems);
164
- }
165
- });
166
- }
167
- });
168
- return items;
169
- };
170
- // 找到所有顶层列表(直接在body下或其他容器中的ol/ul)
171
- $("ol, ul").each(function () {
172
- var $list = $(this);
173
- // 检查是否为顶层列表(不在其他列表内部)
174
- if ($list.parents("ol, ul").length === 0) {
175
- // 创建占位符标记原始位置
176
- var placeholder = $("<div data-list-placeholder=\"true\"></div>");
177
- $list.before(placeholder);
178
- // 收集该列表的所有项目
179
- var items = collectListItems_1($list, 1);
180
- topLevelLists_1.push({
181
- element: $list,
182
- placeholder: placeholder,
183
- items: items,
184
- });
185
- }
186
- });
187
- // 第二步:移除所有ol/ul/li结构
188
- $("ol, ul, li").remove();
189
- // 第三步:在每个占位符位置插入转换后的列表项
190
- topLevelLists_1.forEach(function (listInfo) {
191
- var placeholder = listInfo.placeholder, items = listInfo.items;
192
- // 为该列表生成HTML
193
- var listHtml = items
194
- .map(function (item) {
195
- return ("<div style=\"".concat(mergeStyles(item.style, "padding-left: ".concat(item.paddingLeft, "rem"), "flex-shrink: 0", "width: 100%", "flex-direction: row", "display: flex"), "\" data-list-item=\"true\">") +
196
- "<text style=\"".concat(mergeStyles("flex-shrink: 0", "width: 100%", "line-height: 1", "display: flex", "flex-direction: row"), "\">") +
197
- "<div style=\"".concat(mergeStyles("word-break: break-word", "flex-shrink: 0", "margin-right: 0.5rem"), "\">").concat(item.marker, "</div>") +
198
- "<div style=\"".concat(mergeStyles("word-break: break-word", "flex-shrink: 0", "flex: 1"), "\">").concat(item.textContent, "</div>") +
199
- "</text>" +
200
- "</div>");
201
- })
202
- .join("");
203
- // 在占位符位置插入列表HTML
204
- placeholder.after(listHtml);
205
- // 移除占位符
206
- placeholder.remove();
207
- });
208
- }
209
- //pixui连续的br不生效,用透明文字占位
210
- $("br").each(function () {
211
- $(this).replaceWith("<span style=\"".concat(mergeStyles("color: transparent", "flex-shrink: 0", "font-size: 20px"), "\" class='pixui-richtext-br-placeholder'>1</span>"));
212
- });
213
- //将 a 标签替换为简单div,处理 href,预处理内部样式标签并合并样式
214
- $("a").each(function (i, ele) {
215
- var id = "PA_RichTextHrefId_".concat(hrefIdCnt++);
216
- var href = $(this).attr("href");
217
- var originalStyle = $(this).attr("style") || "";
218
- var textContent = $(this).text(); // 获取纯文本内容
219
- // 收集内部样式标签的样式
220
- var mergedStyles = [];
221
- if ($(this).find("strong").length > 0) {
222
- mergedStyles.push("font-weight: bold;");
223
- }
224
- if ($(this).find("em").length > 0) {
225
- mergedStyles.push("font-style: italic;");
226
- }
227
- if ($(this).find("u").length > 0) {
228
- mergedStyles.push("text-decoration: underline;");
229
- }
230
- if ($(this).find("s").length > 0) {
231
- mergedStyles.push("text-decoration: line-through;");
232
- }
233
- // 收集内部span等标签的style属性
234
- $(this)
235
- .find("strong, em, u, s, span")
236
- .each(function () {
237
- var innerStyle = $(this).attr("style");
238
- if (innerStyle) {
239
- mergedStyles.push(innerStyle);
240
- }
241
- });
242
- // 合并所有样式
243
- var finalStyle = originalStyle;
244
- if (mergedStyles.length > 0) {
245
- finalStyle = mergeStyles.apply(void 0, __spreadArray([originalStyle], mergedStyles, false));
246
- }
247
- if (href) {
248
- linkNodes.push({
249
- type: LinkNodeType.DIV,
250
- href: href,
251
- id: id,
252
- });
253
- }
254
- // 转换为简单div,样式已合并
255
- $(this).replaceWith("<div style=\"".concat(finalStyle, "\" id=\"").concat(id, "\" class=\"PA_RichTextHref_ATag\" >").concat(textContent, "</div>"));
256
- });
257
- //找到所有的文字节点,外层包裹text标签
258
- $("*").each(function () {
259
- // 跳过链接节点内部的文本处理
260
- var nodeId = $(this).attr("id") || "";
261
- if (nodeId.startsWith("PA_RichTextHrefId_")) {
262
- return; // 跳过链接节点,不处理其内部文本
263
- }
264
- // 跳过列表项,因为已经处理完成
265
- var isListItem = $(this).attr("data-list-item") === "true";
266
- if (isListItem) {
267
- return; // 跳过列表项
268
- }
269
- $(this)
270
- .contents()
271
- .each(function () {
272
- // 检查当前文本节点是否在链接节点内部
273
- var linkParent = $(this).closest("[id^='PA_RichTextHrefId_']");
274
- if (linkParent.length > 0) {
275
- return; // 跳过链接节点内部的文本
276
- }
277
- // 检查当前文本节点是否在列表项内部
278
- var listParent = $(this).closest("[data-list-item='true']");
279
- if (listParent.length > 0) {
280
- return; // 跳过列表项内部的文本
281
- }
282
- if (this.type === "text") {
283
- var text = this.data.trim();
284
- if (text.length > 0) {
285
- $(this).replaceWith("<text style=\"".concat(mergeStyles("word-break: break-word", "flex-shrink: 0", "flex-direction: row"), "\">").concat(text, "</text>"));
286
- }
287
- }
288
- });
289
- });
290
- //将strong em u s标签替换成text标签
291
- $("strong").each(function () {
292
- var html = $(this).html();
293
- var style = $(this).attr("style") || "";
294
- $(this).replaceWith("<text style=\"".concat(mergeStyles(style, "font-weight: bold", "flex-shrink: 0"), "\">").concat(html, "</text>"));
295
- });
296
- $("em").each(function () {
297
- var html = $(this).html();
298
- var style = $(this).attr("style") || "";
299
- $(this).replaceWith("<text style=\"".concat(mergeStyles(style, "font-style: italic", "flex-shrink: 0"), "\">").concat(html, "</text>"));
300
- });
301
- $("u").each(function () {
302
- var html = $(this).html();
303
- var style = $(this).attr("style") || "";
304
- $(this).replaceWith("<text style=\"".concat(mergeStyles(style, "text-decoration: underline", "flex-shrink: 0"), "\">").concat(html, "</text>"));
305
- });
306
- $("s").each(function () {
307
- var html = $(this).html();
308
- var style = $(this).attr("style") || "";
309
- $(this).replaceWith("<text style=\"".concat(mergeStyles(style, "text-decoration: line-through", "flex-shrink: 0"), "\">").concat(html, "</text>"));
310
- });
311
- $("span").each(function () {
312
- var html = $(this).html();
313
- var style = $(this).attr("style") || "";
314
- $(this).replaceWith("<text style=\"".concat(mergeStyles(style, "flex-shrink: 0"), "\">").concat(html, "</text>"));
315
- });
316
- //p换成div
317
- $("p").each(function () {
318
- var html = $(this).html();
319
- var style = $(this).attr("style") || "";
320
- $(this).replaceWith("<div style=\"".concat(mergeStyles(style, "flex-shrink: 0", "width:100%"), "\">").concat(html, "</div>"));
321
- });
322
- //处理 img 上的 href
323
- $("img").each(function (i, ele) {
324
- var id = "PA_RichTextHrefId_".concat(hrefIdCnt++);
325
- $(this).attr("id", id);
326
- var href = $(this).attr("href");
327
- if (href) {
328
- linkNodes.push({
329
- type: LinkNodeType.IMG,
330
- href: href,
331
- id: id,
332
- });
333
- }
334
- $(this).attr("href", "");
335
- $(this).attr("class", "PA_RichTextHref_ImgTag");
336
- $(this).attr("data-href", href);
337
- });
338
- //补充 flex-shrink: 0
339
- ["h1", "h2", "h3", "h4", "h5", "h6", "a", "img", "div"].forEach(function (tag) {
340
- $("".concat(tag)).each(function () {
341
- // 跳过列表项内部的节点
342
- var isListItem = $(this).attr("data-list-item") === "true";
343
- var inListItem = $(this).closest("[data-list-item='true']").length > 0;
344
- if (!isListItem && !inListItem) {
345
- var style = $(this).attr("style") || "";
346
- $(this).attr("style", mergeStyles(style, "flex-shrink: 0"));
347
- }
348
- });
349
- });
350
- }
351
- // 层级处理
352
- {
353
- //一行中的文字配置了不同样式的时候文字节点会嵌套,导致pixui样式异常。将嵌套的text节点摊平,同时合并内外的style
354
- while ($("text > text").length > 0) {
355
- $("text").each(function () {
356
- var $this = $(this);
357
- var parentStyle = $this.attr("style") || "";
358
- $this.children("text").each(function () {
359
- var $child = $(this);
360
- var childStyle = $child.attr("style") || "";
361
- // 合并style属性,将父节点的style附加到子节点上
362
- var mergedStyle = mergeStyles(parentStyle, childStyle);
363
- // 更新子元素的style属性
364
- $child.attr("style", mergedStyle);
365
- });
366
- //去掉父节点
367
- if ($this.children("text").length > 0) {
368
- $this.replaceWith($this.html() || "");
369
- }
370
- });
371
- }
372
- //!!一行的text节点会并列在父节点下无法换行,将其修改为div节点,外层再包一个text节点
373
- // 会变成<段落div><text><单独一种样式div>文字
374
- var nodearr_1 = [];
375
- ["h1", "h2", "h3", "h4", "h5", "h6", "div"].map(function (tag) {
376
- // text的父节点
377
- $("".concat(tag)).each(function () {
378
- var nodeId = $(this).attr("id") || "";
379
- var isListItem = $(this).attr("data-list-item") === "true";
380
- var inListItem = $(this).closest("[data-list-item='true']").length > 0;
381
- // 跳过链接节点、列表项本身以及列表项内部的节点
382
- if (!nodeId.startsWith("PA_RichTextHrefId_") && !isListItem && !inListItem) {
383
- nodearr_1.push(this);
384
- }
385
- });
386
- });
387
- nodearr_1.forEach(function (node) {
388
- var tag = $(node).prop("tagName");
389
- var nodeId = $(node).attr("id") || ""; // 保存节点ID
390
- // 处理text子节点,将text内容转换为div
391
- $(node)
392
- .children("text")
393
- .each(function () {
394
- // 检查是否在列表项内部
395
- var inListItem = $(this).closest("[data-list-item='true']").length > 0;
396
- if (inListItem) {
397
- return; // 跳过列表项内部的text节点
398
- }
399
- var text = $(this).html();
400
- var style = $(this).attr("style") || "";
401
- $(this).replaceWith("<div style=\"".concat(mergeStyles(style, "word-break: break-word", "flex-shrink: 0", "flex-direction: row"), "\">").concat(text, "</div>"));
402
- });
403
- var taghtml = $(node).html() || "";
404
- var tagstyle = $(node).attr("style") || "";
405
- // 构建标准结构 - 为所有节点构建div-text-div-文字结构
406
- if (taghtml && taghtml.trim()) {
407
- var idAttr = nodeId ? " id=\"".concat(nodeId, "\"") : "";
408
- // 保留所有自定义属性
409
- var customAttrs = "";
410
- var attributes = $(node).get(0).attribs || {};
411
- for (var _i = 0, _a = Object.entries(attributes); _i < _a.length; _i++) {
412
- var _b = _a[_i], key = _b[0], value = _b[1];
413
- if (key !== "style" && key !== "id") {
414
- customAttrs += " ".concat(key, "=\"").concat(value, "\"");
415
- }
416
- }
417
- //自己的子节点外套一个text,自己不变
418
- $(node).replaceWith("<".concat(tag, " style=\"").concat(mergeStyles(tagstyle, "flex-direction: row"), "\"").concat(idAttr).concat(customAttrs, "><text style=\"").concat(mergeStyles("flex-shrink: 0", "width: 100%"), "\">").concat(taghtml, "</text></").concat(tag, ">"));
419
- }
420
- });
421
- //text-indent 处理首行缩进
422
- $("*").each(function () {
423
- var textIndent = $(this).css("text-indent");
424
- if (textIndent) {
425
- /**
426
- * 创建透明字符占位,样式会加在段落的p节点上,将透明字符添加到text节点下保证换行以后状态正确。
427
- * 状态为<div style=text-indent:xxx><text><透明字符节点/><div style=样式>文字</div></text></div>
428
- * 属性是几 em 就加几个字符
429
- * */
430
- var $spacerText = $("<div style=\"".concat(mergeStyles("color: transparent", "flex-shrink: 0", "font-size: 16px"), "\">").concat("一".repeat(parseInt(textIndent)), "</div>"));
431
- // 寻找子节点中的text节点
432
- var textChild = $(this).children("text").first();
433
- if (textChild.length > 0) {
434
- var firstTextChild = textChild.children().first();
435
- if (firstTextChild.length > 0) {
436
- // 如果text节点有子节点,在第一个子节点前插入
437
- firstTextChild.before($spacerText);
438
- }
439
- else {
440
- // 如果text节点没有子节点,直接添加
441
- textChild.append($spacerText);
442
- }
443
- }
444
- }
445
- });
446
- //pixui 的 line-height只在 text 上生效,所以将所有的 div 上的 line-height 转移到父 text 上
447
- //当前的结构为 div > text > div,只处理一层就行
448
- //遍历每个 text 的子 div,将其中最大的 line-height 转移到 text 上
449
- $("text").each(function () {
450
- var $text = $(this);
451
- var maxLineHeight = 0;
452
- $text.children("div").each(function () {
453
- var lineHeight = parseInt($(this).css("line-height") || "1");
454
- maxLineHeight = Math.max(maxLineHeight, lineHeight);
455
- });
456
- var lineHeightScale = (config === null || config === void 0 ? void 0 : config.lineHeightScale) || 1;
457
- // pixui 中的实际显示的距离可能与网页中实际显示的距离差距较大
458
- if (maxLineHeight > 0) {
459
- $text.css("line-height", maxLineHeight * lineHeightScale + "");
460
- }
461
- });
462
- //将div中的letter-spacing转移到text上
463
- $("text").each(function () {
464
- var $text = $(this);
465
- var maxLetterSpacing = 0;
466
- $text.children("div").each(function () {
467
- var letterSpacing = $(this).css("letter-spacing") || "0";
468
- var letterSpacingNum = parseInt(letterSpacing);
469
- maxLetterSpacing = Math.max(maxLetterSpacing, letterSpacingNum);
470
- });
471
- if (maxLetterSpacing > 0) {
472
- $text.css("letter-spacing", maxLetterSpacing + "rem");
473
- }
474
- });
475
- //将div中的text-align转移到text子节点上
476
- $("div").each(function () {
477
- var textAlign = $(this).css("text-align") || "";
478
- textAlign != "" &&
479
- $(this)
480
- .children("text")
481
- .each(function () {
482
- $(this).css("text-align", textAlign);
483
- });
484
- $(this).css("text-align", "");
485
- });
486
- //去除空的text节点
487
- $("text").each(function () {
488
- var t = $(this).html() || "";
489
- if (t.trim() == "") {
490
- $(this).remove();
491
- }
492
- });
493
- var hTagRem_1 = ["2rem", "1.5rem", "1.17rem", "1rem", "0.83rem", "0.67rem"];
494
- ["h1", "h2", "h3", "h4", "h5", "h6"].map(function (tag) {
495
- return $("".concat(tag)).each(function () {
496
- var idx = parseInt(tag.replace("h", "")) - 1;
497
- var style = $(this).attr("style") || "";
498
- //如果没有fontsize
499
- if (!style.includes("font-size")) {
500
- $(this).attr("style", mergeStyles(style, "font-size:".concat(hTagRem_1[idx])));
501
- }
502
- });
503
- });
504
- //一些标签会没有结束/,手动补充
505
- //手动替换nbsp
506
- var res = $.html();
507
- res = res.replaceAll(/<img([^>]+)>/g, "<img$1 />").replaceAll(/&nbsp;/g, " ");
508
- console.log(res);
509
- return res;
510
- }
511
- };
512
- /**
513
- * 为富文本中的链接节点绑定点击事件
514
- * @param linkClickHandler 点击事件回调函数
515
- */
516
- RichText.bindLinkClickEvents = function (linkClickHandler) {
517
- linkNodes.forEach(function (nodeInfo) {
518
- var element = document.getElementById(nodeInfo.id);
519
- if (element) {
520
- element.onclick = function (e) {
521
- e.stopPropagation();
522
- e.preventDefault();
523
- linkClickHandler({
524
- type: nodeInfo.type,
525
- href: nodeInfo.href,
526
- id: nodeInfo.id,
527
- });
528
- return false;
529
- };
530
- }
531
- });
532
- };
533
- })(RichText || (exports.RichText = RichText = {}));