鸿蒙元服务项目实战：备忘录内容编辑开发

前言

上篇文章，我们把主要的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分，显然是不合理的，所以这里的时间一定是实时的，这个一定要注意。

编辑页面还有一些其他的注意事项，比如换肤功能，底部的样式设置等等，都是比较的简单，就不做赘述了。

项目地址：https://gitee.com/abnercode/harmony-easy-recording