HarmonyOS鸿蒙Next中为什么在RichEditor添加图片后getSpans再次添加图片图片的样式会被压缩？
HarmonyOS鸿蒙Next中为什么在RichEditor添加图片后getSpans再次添加图片图片的样式会被压缩？ 获取span的内容并存储：
Button('获取span的内容').onClick((event: ClickEvent) => {
const res: Array<RichEditorImageSpanResult | RichEditorTextSpanResult> =
this.controller.richEditorController.getSpans()
AppStorage.setOrCreate('fasfasf', res)
res.forEach((item) => {
if (item['textStyle']) {
LogUtil.d('fasfss', item['value'])
}
if (item['imageStyle']) {
LogUtil.d('fasfss', item['valueResourceStr'])
}
})
LogUtil.d('fasfasfa', res)
})
重新进入页面加载存储的图片图片发生变形：verticalAlign的值直接从0变为了3，很奇怪
.onReady((event) => {
const res: Array<RichEditorImageSpanResult | RichEditorTextSpanResult> =
AppStorage.get('fasfasf') as Array<RichEditorImageSpanResult | RichEditorTextSpanResult>
if (res && res.length > 0) {
const res2 = res.reverse();
res2.forEach((item) => {
if (item['textStyle']) {
const aa = item as RichEditorTextSpanResult
this.controller.richEditorController.addTextSpan(aa.value,
{
offset: aa.offsetInSpan[0],
style: aa.textStyle,
paragraphStyle: aa.paragraphStyle,
urlStyle: aa.urlStyle
})
}
if (item['imageStyle']) {
const bb = item as RichEditorImageSpanResult
const imageStyle: RichEditorImageSpanStyle | undefined = {
size: [`${bb.imageStyle.size[0]}px`, `${bb.imageStyle.size[1] + 20}px`],
verticalAlign: bb.imageStyle.verticalAlign,
objectFit: bb.imageStyle.objectFit,
layoutStyle: bb.imageStyle.layoutStyle
}
LogUtil.d('fasfasfa', '默认添加存储图片', bb, bb.imageStyle.size, imageStyle)
this.controller.richEditorController.addImageSpan(bb.valueResourceStr,
{
offset: bb.offsetInSpan[0],
imageStyle
})
}
});
}
})
相关日志：
11-17 14:59:41.511 17666-17666 A03D00/com.f...uawei/JSAPP com.footro...hx.huawei D fasfasfa ┌───────────────────────────────────────────────────────────────────────────────
fasfasfa | [
fasfasfa | [
fasfasfa | [
fasfasfa | {
fasfasfa | "offsetInSpan": [
fasfasfa | 0,
fasfasfa | 1
fasfasfa | ],
fasfasfa | "spanPosition": {
fasfasfa | "spanIndex": 0,
fasfasfa | "spanRange": [
fasfasfa | 0,
fasfasfa | 1
fasfasfa | ]
fasfasfa | },
fasfasfa | "valueResourceStr": "file:///data/storage/el2/base/haps/entry/files/richeditor/saved_image.jpg",
fasfasfa | "imageStyle": {
fasfasfa | "size": [
fasfasfa | 1052,
fasfasfa | 1507
fasfasfa | ],
fasfasf
11-17 14:59:41.511 17666-17666 A03D00/com.f...uawei/JSAPP com.footro...hx.huawei D fasfasfa | a | "verticalAlign": 0,
fasfasfa | "objectFit": 0,
fasfasfa | "layoutStyle": {
fasfasfa | "borderRadius": "",
fasfasfa | "margin": ""
fasfasfa | }
fasfasfa | }
fasfasfa | }
fasfasfa | ]
fasfasfa | ]
fasfasfa | ]
fasfasfa └───────────────────────────────────────────────────────────────────────────────────────
11-17 14:59:43.521 17666-17666 A03D00/com.f...uawei/JSAPP com.footro...hx.huawei D fasfasfa ┌───────────────────────────────────────────────────────────────────────────────
fasfasfa | [
fasfasfa | [
fasfasfa | "默认添加存储图片",
fasfasfa | {
fasfasfa | "offsetInSpan": [
fasfasfa | 0,
fasfasfa | 1
fasfasfa | ],
fasfasfa | "spanPosition": {
fasfasfa | "spanIndex": 0,
fasfasfa | "spanRange": [
fasfasfa | 0,
fasfasfa | 1
fasfasfa | ]
fasfasfa | },
fasfasfa | "valueResourceStr": "file:///data/storage/el2/base/haps/entry/files/richeditor/saved_image.jpg",
fasfasfa | "imageStyle": {
fasfasfa | "size": [
fasfasfa | 1052,
fasfasfa | 1507
fasfasfa | ],
fasfasfa | "verticalAl
11-17 14:59:43.521 17666-17666 A03D00/com.f...uawei/JSAPP com.footro...hx.huawei D fasfasfa | ign": 0,
fasfasfa | "objectFit": 0,
fasfasfa | "layoutStyle": {
fasfasfa | "borderRadius": "",
fasfasfa | "margin": ""
fasfasfa | }
fasfasfa | }
fasfasfa | },
fasfasfa | [
fasfasfa | 1052,
fasfasfa | 1507
fasfasfa | ],
fasfasfa | {
fasfasfa | "size": [
fasfasfa | "1052px",
fasfasfa | "1527px"
fasfasfa | ],
fasfasfa | "verticalAlign": 0,
fasfasfa | "objectFit": 0,
fasfasfa | "layoutStyle": {
fasfasfa | "borderRadius": "",
fasfasfa | "margin": ""
fasfasfa | }
fasfasfa | }
fasfasfa | ]
fasfasfa | ]
fasfasfa └──────────────────────────────────────────────────────────────
11-17 14:59:43.521 17666-17666 A03D00/com.f...uawei/JSAPP com.footro...hx.huawei D fasfasfa | ─────────────────────────
11-17 15:00:07.624 17666-17666 A03D00/com.f...uawei/JSAPP com.footro...hx.huawei D fasfasfa ┌───────────────────────────────────────────────────────────────────────────────
fasfasfa | [
fasfasfa | [
fasfasfa | [
fasfasfa | {
fasfasfa | "offsetInSpan": [
fasfasfa | 0,
fasfasfa | 1
fasfasfa | ],
fasfasfa | "spanPosition": {
fasfasfa | "spanIndex": 0,
fasfasfa | "spanRange": [
fasfasfa | 0,
fasfasfa | 1
fasfasfa | ]
fasfasfa | },
fasfasfa | "valueResourceStr": "file:///data/storage/el2/base/haps/entry/files/richeditor/saved_image.jpg",
fasfasfa | "imageStyle": {
fasfasfa | "size": [
fasfasfa | 1052,
fasfasfa | 1527
fasfasfa | ],
fasfasf
11-17 15:00:07.624 17666-17666 A03D00/com.f...uawei/JSAPP com.footro...hx.huawei D fasfasfa | a | "verticalAlign": 3,
fasfasfa | "objectFit": 0,
fasfasfa | "layoutStyle": {
fasfasfa | "borderRadius": "0.00vp",
fasfasfa | "margin": "[0.00vp,0.00vp,0.00vp,0.00vp]"
fasfasfa | }
fasfasfa | }
fasfasfa | }
fasfasfa | ]
fasfasfa | ]
fasfasfa | ]
fasfasfa └───────────────────────────────────────────────────────────────────────────────────────
更多关于HarmonyOS鸿蒙Next中为什么在RichEditor添加图片后getSpans再次添加图片图片的样式会被压缩？的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
在HarmonyOS Next的RichEditor中，getSpans方法获取图片Span后重新添加时，系统会重新解析并应用默认布局约束，导致图片尺寸被压缩。这是由于富文本引擎对重复插入的媒体对象会执行标准化处理，强制适应容器宽度。可通过在插入前手动设置图片Span的宽度属性为固定值，或使用自定义Span保留原始尺寸参数来避免压缩。
更多关于HarmonyOS鸿蒙Next中为什么在RichEditor添加图片后getSpans再次添加图片图片的样式会被压缩？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS Next的RichEditor组件中，图片样式被压缩的问题主要源于verticalAlign属性的自动变更。从日志可以看出，原始图片的verticalAlign值为0（对应顶部对齐），但在重新添加后变成了3（对应基线对齐）。
这可能是由于RichEditor在重新渲染图片时，会根据当前布局上下文自动调整图片的对齐方式。当使用getSpans()获取图片信息后，再通过addImageSpan()重新添加时，系统可能基于新的布局计算重新设置了verticalAlign值。
建议在重新添加图片时显式设置verticalAlign属性，确保其保持原始值：
const imageStyle: RichEditorImageSpanStyle | undefined = {
size: [`${bb.imageStyle.size[0]}px`, `${bb.imageStyle.size[1]}px`],
verticalAlign: bb.imageStyle.verticalAlign, // 确保使用原始值
objectFit: bb.imageStyle.objectFit,
layoutStyle: bb.imageStyle.layoutStyle
}
另外，注意在代码中图片高度增加了20px（${bb.imageStyle.size[1] + 20}px），这也会影响图片的显示比例，可能导致视觉上的压缩效果。建议保持原始尺寸或按比例调整。
