Read the original article：How to modify indentation in RichEditor based on existing indentation
Requirement Description
Open a rich text editor with existing content. How can I modify the indentation of existing paragraphs?
Background Knowledge
- RichEditor: A component that supports mixed text and image typesetting and interactive text editing.
- getParagraphs: Gets the paragraphs in the specified range as a string.
RichEditorParagraphResult: paragraph information returned by the backend.
RichEditorParagraphStyle: paragraph style.
LeadingMarginPlaceholder: The leading margin placeholder is used to represent the distance between the left side of the text paragraph and the edge of the component.
Implementation Steps
- The getParagraphs method can be used to obtain paragraphs within a specified range, and then, based on the style information within the paragraphs, retrieve the corresponding distance between the component and the edge.
- updateParagraphStyles for different paragraphs based on the obtained indentation values
Code Snippet / Configuration
@Entry
@Component
struct LineBreakStrategyExample {
controller: RichEditorController = new RichEditorController();
private spanParagraphs: RichEditorParagraphResult[] = [];
testStr: string = '0123456789,0123456789,0123456789,0123456789,0123456789.';
@State left: number = 0;
@State right: number = 0;
build() {
Column() {
RichEditor({ controller: this.controller })
.onReady(() => {
this.controller.addTextSpan(this.testStr, {
style: {
fontColor: Color.Black,
fontSize: '32'
},
paragraphStyle: {
textAlign: TextAlign.Start,
lineBreakStrategy: LineBreakStrategy.GREEDY,
leadingMargin: {
pixelMap: undefined,
size: [16, 6]
}
}
});
})
.width(400)
.height(300)
.margin({ bottom: 20 })
.draggable(false);
Column({ space: 10 }) {
Button('Get distance').onClick(() => {
this.spanParagraphs = this.controller.getParagraphs({ start: 1, end: 30 });
for (let i = 0; i < this.spanParagraphs.length; i++) {
let margin: LeadingMarginPlaceholder | Dimension | undefined = this.spanParagraphs[i].style.leadingMargin;
let str = JSON.stringify(margin);
let jsonObj: Object | null = JSON.parse(str);
if (jsonObj) {
let commObj = (jsonObj as Record<string, Object>);
let commRecord = (commObj['size'] as Record<string, Object>);
let arrayJson = JSON.stringify(commRecord);
// sArray is the value of indentation
let sArray = JSON.parse(arrayJson) as Array<string>;
this.left = Number(sArray[0].split('.')[0]);
this.right = Number(sArray[1].split('.')[0]);
}
}
});
Button('Paragraph alignment').onClick(() => {
this.controller.updateParagraphStyle({
// Select the paragraphs to be updated by string
start: -1, end: -1,
style: {
//The value of leadingMargin is calculated based on the values obtained above and then assigned a new value
leadingMargin: { pixelMap: null, size: [this.left + 10, this.right + 20] }
}
});
});
};
};
}
}
Limitations or Considerations
Constraints and Restrictions
This example supports API Version 19 Release and above.
This example supports HarmonyOS SDK Version 5.1.1 Release and above.
This example requires DevEco Studio Version 5.1.1 Release and above to compile and run.
Summarize
1.LeadingMargin cannot be directly converted to LeadingMarginPlaceholder through methods. JSON is needed here to convert between strings and objects.
2.Both the getParagraphs method and the updateParagraphStyle method involve the selected paragraph range (RichEditorRange). The unit of the selection range here is characters. For example, if the first paragraph is 10 characters long, the range 1-10 is selected. And so on.
Top comments (0)