Foreword
this article is based on Api12
in the previous article, we have completed the main UI. In this article, we have completed the main function editing page. The so-called memo is to record the content. Of course, the content is not limited to text, pictures, styles, etc. The first version can only realize the text, and then continue to expand.
There are three key points to realize the development of editing pages. The first is to write rich text content, the second is to modify the style of content, and the third is to store content.
By the way, the current article corresponds remember meta-service items have been put on the shelves and can be searched in the application store. Remember can experience.
Rich Text Content Writing
Rich text content editing we can directly use the RichEditor component, the most important is the parameter, value: RichEditorOptions, through which we can set the style, and get the final rich text content, this is very important.
Defining Initialization Parameters
controller: RichEditorController = new RichEditorController();
options: RichEditorOptions = { controller: this.controller };
set Initialization Parameters
RichEditor(this.options)
.onReady(() => {
//time
this.nowTime = this.getDateTime()
this.nowInterval = setInterval(() => {
this.nowTime = this.getDateTime()
}, 1000)
})
.placeholder("Take notes at will, record every little bit", {
fontColor: "#666666"
})
.caretColor(Color.Red)
.padding(10)
.margin({ top: 10 })
.onSelect((value: RichEditorSelection) => {
this.start = value.selection[0];
this.end = value.selection[1];
})
}
.alignRules({
top: { anchor: "bar", align: VerticalAlign.Bottom },
bottom: { anchor: "bottom_bar", align: VerticalAlign.Top }
}).margin({ bottom: 80 })
content Style Modification
all content style modifications are made using the initialization parameters of there are two situations for the rich text controller to set, the first is to directly click on the style and then write the content, and the other is to set the style after long pressing on the original content.
For example, if I click the bold style first and then enter the text, then the entered text is bold and will return to normal only after the bold is canceled.
The second is to adjust the style after long-pressing the selected text in the original text. The following bold style requires attention, because the specified text style needs to be set and the starting position of the current long-pressed text needs to be obtained, that is, the onSelect method in the above code.
Of course, it's not just bolding, any style is basically these two situations. In addition, it's also very important to keep the previous style before modifying the style, for example, if the text becomes larger, bolding, and changing the color, then you modify the current style, only the current style, and cannot overwrite or discard the previous style.
As shown below, change the font size and color of the selected content, then the original bold is still retained.
Bold Text
private setBold() {
if (this.start != -1 && this.end != -1) {
this.controller.updateSpanStyle({
start: this.start,
end: this.end,
textStyle: {
fontWeight: FontWeight.Bolder
}
})
}
}
text size
private setFontSize() {
if (this.start != -1 && this.end != -1) {
this.controller.updateSpanStyle({
start: this.start,
end: this.end,
textStyle: {
fontSize: this.clickStyleSizeValue
}
})
}
}
text skew
private setStyle() {
if (this.start != -1 && this.end != -1) {
this.controller.updateSpanStyle({
start: this.start,
end: this.end,
textStyle: {
fontStyle: FontStyle.Italic
}
})
}
}
text color
private setFontColor() {
if (this.start != -1 && this.end != -1) {
this.controller.updateSpanStyle({
start: this.start,
end: this.end,
textStyle: {
fontColor: this.clickStyleColorValue
}
})
}
}
before changing the specified style, we need to set the previously set style so that each style can be consistent.
private changeStyle() {
this.controller.setTypingStyle({
fontWeight: this.isClickStyleB ? FontWeight.Bold : FontWeight.Normal,
fontStyle: this.isClickStyleI ? FontStyle.Italic : FontStyle.Normal,
fontColor: this.clickStyleColorValue,
fontSize: this.clickStyleSizeValue
})
}
Content Storage
after editing the content, what we need to do is to store the content. After all, we are a stand-alone application and do not involve the network, so we can only choose the local storage method.
There are many ways to store data, such as databases, files, memory storage, etc. In the development of meta-services, it is not to use whichever you want, but to use whichever you support. At present, check official website and find that ohos.data.preferences (user preferences) are supported. We can use it to simply store our data. Of course, there is no support for meta-services on the official website of the database. There is no verification at present. If it is supported in the future, try to use the database.
UseFor user preferences, it should be noted that the dynamic setting of key can use the current timestamp as the key, while the corresponding value value is a json string, which contains attributes such as title, time, content, background color, etc.
User preferences currently encapsulate the tool class, you can go to the source code to view it.
let title = this.title //标题
let rootBgColorValue = this.clickSkinColorValue //背景颜色
let id = this.tempContentItemId != undefined ? this.tempContentItemId : new Date().getTime() //id
let span = JSON.stringify(this.controller.getSpans())
let bean = new ListContentBean()
if (title != undefined && title != "" && span != undefined && span != "") {
bean.title = title
bean.time = this.getDateTime()
bean.timeValue = new Date().getTime()
bean.id = id
bean.bgColor = rootBgColorValue
bean.content = span
let spans = this.controller.getSpans() as Array<RichEditorTextSpanResult>
let desc = ""
spans.forEach((span) => {
if (desc.length < 30) {
desc = desc + span.value.trim()
}
})
bean.desc = desc
let json = JSON.stringify(bean)
DataPreferences.getInstance().putSync("abner" + id, json)
}
Related Summary
regarding the time that should change in real time, it is impossible for me to enter the editing page 10:10, edit for 30 minutes, or 10:10, which is obviously unreasonable, so the time here must be real-time, this must be paid attention.
There are some other matters needing attention in editing the page, such as skin changing function, style setting at the bottom, etc., which are relatively simple and will not be repeated.
Top comments (0)