前言
上篇文章，我们把主要的UI已经完成了，本篇文章，我们把主要的功能编辑页面完成，所谓备忘录，就是记录内容，当然了内容不限于文字，图片，样式等等，第一个版本只实现文字即可，后续再不断地扩展。
实现编辑页面开发，有三个重点，第一个进行富文本内容编写，第二个，进行内容的样式修改，第三个就是，进行内容存储。
富文本内容编写
富文本内容编辑我们直接使用RichEditor组件即可，最重要的就是参数，value: RichEditorOptions，通过它，我们可以用来设置样式，和获取最后的富文本内容，这一点是很重要的。
定义初始化参数
controller: RichEditorController = new RichEditorController(); options: RichEditorOptions = { controller: this.controller };
设置初始化参数
RichEditor(this.options) .onReady(() => { //获取当前的时间 this.nowTime = this.getDateTime() this.nowInterval = setInterval(() => { this.nowTime = this.getDateTime() }, 1000) }) .placeholder("随心记，记录点点滴滴……", { 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 })
内容样式修改
所有的内容样式修改，都是使用的初始化参数中富文本控制器来设置的，有两种情况，第一种是直接点击样式后再书写内容，还有一种是再原有的内容上，长按选择文本后进行设置样式。
比如我先点击加粗样式，后输入文本，那么输入的文本都是加粗的，只有取消加粗后才会恢复正常。
第二种就是在原有的文本中，长按选择文本后进行样式调整，如下的加粗样式，这一种需要注意，因为需要设置指定的文字样式，需要获取当前长按的文字的起始位置，也就是上述代码中的onSelect方法。
当然了不仅仅是加粗，任何的样式基本都是这两种情况，除此之外，还有一点非常重要，那就是修改样式之前，要保留之前的样式，比如之前是文字变大，加粗，还有更改颜色的，那么你修改当前样式，仅仅是当前样式，不能覆盖或者丢弃之前的样式。
如下所示，给选中的内容更改字体大小和颜色，那么原来的加粗仍然是保留的。
文字加粗
private setBold() { if (this.start != -1 && this.end != -1) { this.controller.updateSpanStyle({ start: this.start, end: this.end, textStyle: { fontWeight: FontWeight.Bolder } }) } }
文字大小
private setFontSize() { if (this.start != -1 && this.end != -1) { this.controller.updateSpanStyle({ start: this.start, end: this.end, textStyle: { fontSize: this.clickStyleSizeValue } }) } }
文字倾斜
private setStyle() { if (this.start != -1 && this.end != -1) { this.controller.updateSpanStyle({ start: this.start, end: this.end, textStyle: { fontStyle: FontStyle.Italic } }) } }
文字颜色
private setFontColor() { if (this.start != -1 && this.end != -1) { this.controller.updateSpanStyle({ start: this.start, end: this.end, textStyle: { fontColor: this.clickStyleColorValue } }) } }
改变指定样式之前，我们需要设置之前设置过的样式，使其各个样式可以保持一致。
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 }) }
内容存储
编辑好了内容之后，我们需要做的就是，存储内容，毕竟我们这是一个单机应用，不牵扯到网络，所以只能选择本地存储方式了。
存储数据有很多方式，比如数据库，文件，内存存储等等，在元服务开发中，并不是说想用哪个就用哪个，而是支持哪个就用哪个，目前查看官网，发现ohos.data.preferences (用户首选项)是支持的，我们可以使用它来简单实现我们的数据存储，当然了，数据库官网上没看到支持元服务，目前没有做验证，如果日后支持，尽量用数据库。
使用用户首选项，需要注意，key的动态设置，可以以当前时间戳作为key，而同样对应的value值则是一个json字符串，这个字符串包含标题，时间，内容，背景颜色等等属性。
用户首选项目前封装了工具类，大家可以去源码中查看即可。
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) }
相关总结
关于时间应该实时变化的，不可能我进编辑页面是10点10分，编辑了30分钟，还是10点10分，显然是不合理的，所以这里的时间一定是实时的，这个一定要注意。
编辑页面还有一些其他的注意事项，比如换肤功能，底部的样式设置等等，都是比较的简单，就不做赘述了。
