ArkUI RichEditor：富文本能编辑，但别把它当 TextArea 加粗版

今天我们写一个很小的 RichEditor。它能编辑图文内容，但我们先不做 Markdown、不做 HTML 转换，也不做保存。

官方文档里也把边界说得很清楚：只是展示图文时，可以先考虑 Text 或 RichText；用户真的要编辑图文内容时，再上 RichEditor。这个 Demo 就按这个边界来。

先准备控制器

RichEditor 常见写法是先建控制器：

private editorController: RichEditorController = new RichEditorController();

然后交给组件：

RichEditor({ controller: this.editorController })

控制器负责往编辑区里加文本、图片和 Symbol。你可以把它理解成编辑区的操作入口。

往编辑区加内容

案例里在 onReady 后填一段初始内容：

this.editorController.addTextSpan('RichEditor 可以放文字、图片和 Symbol。', {
  style: { fontSize: 16, fontColor: '#334155', fontWeight: 600 }
})

图片和 Symbol 也类似：

this.editorController.addImageSpan($r('app.media.startIcon'), {
  imageStyle: { size: [20, 20], verticalAlign: ImageSpanAlignment.CENTER, objectFit: ImageFit.Contain }
})

this.editorController.addSymbolSpan($r('sys.symbol.open_sidebar'), {
  style: { fontSize: 18, fontColor: ['#2563EB'], fontWeight: 700 }
})

这里故意用很小的图片尺寸，避免把注意力带到图片加载上。本篇只看编辑器能力。

控制输入边界

placeholder、maxLength、copyOptions 都是编辑器里很常见的边界：

.placeholder('写一段图文评论')
.maxLength(200)
.copyOptions(CopyOptions.InApp)

onDidChange 这里只做一个简单提示，说明编辑内容发生了变化。真正项目里你可能会用它更新保存按钮状态，或者提示草稿未保存，但那是后面的状态管理和业务流程话题。

你现在遇到的富文本需求，是“展示一段内容”，还是“让用户编辑一段内容”？这两个答案会直接决定你用 RichText 还是 RichEditor。

完整代码

@Entry
@Component
struct ArkUIRichEditorDemo {
  private editorController: RichEditorController = new RichEditorController();
  private initialized: boolean = false;
  @State editInfo: string = '还没有输入内容';

  @Builder
  sectionTitle(title: string) {
    Text(title)
      .width('100%')
      .fontSize(15)
      .fontWeight(700)
      .fontColor('#334155')
  }

  private fillEditor() {
    if (this.initialized) {
      return
    }
    this.initialized = true
    this.editorController.addTextSpan('RichEditor 可以放文字、图片和 Symbol。', {
      style: { fontSize: 16, fontColor: '#334155', fontWeight: 600 }
    })
    this.editorController.addTextSpan('\n这里不是 TextArea 加粗版，它负责图文编辑。', {
      style: { fontSize: 14, fontColor: '#64748B' }
    })
    this.editorController.addImageSpan($r('app.media.startIcon'), {
      imageStyle: { size: [20, 20], verticalAlign: ImageSpanAlignment.CENTER, objectFit: ImageFit.Contain }
    })
    this.editorController.addTextSpan(' 图片也能进编辑区。', {
      style: { fontSize: 14, fontColor: '#0F766E' }
    })
    this.editorController.addSymbolSpan($r('sys.symbol.open_sidebar'), {
      style: { fontSize: 18, fontColor: ['#2563EB'], fontWeight: 700 }
    })
  }

  build() {
    Scroll() {
      Column({ space: 18 }) {
        Text('ArkUI RichEditor')
          .width('100%')
          .fontSize(24)
          .fontWeight(700)
          .fontColor('#0F172A')

        Text('富文本能编辑，但别把它当 TextArea 加粗版')
          .width('100%')
          .fontSize(22)
          .fontWeight(700)
          .fontColor('#111827')

        Text('RichEditor 面向图文混排和交互式编辑。真正需要编辑富文本时再用它。')
          .width('100%')
          .fontSize(14)
          .fontColor('#64748B')
          .lineHeight(22)

        Column({ space: 12 }) {
          this.sectionTitle('编辑区')

          RichEditor({ controller: this.editorController })
            .width('100%')
            .height(220)
            .padding(12)
            .backgroundColor('#FFFFFF')
            .border({ width: 1, color: '#CBD5E1' })
            .borderRadius(8)
            .placeholder('写一段图文评论')
            .maxLength(200)
            .copyOptions(CopyOptions.InApp)
            .onReady(() => {
              this.fillEditor()
            })
            .onDidChange(() => {
              this.editInfo = '内容已经发生变化'
            })

          Text(this.editInfo)
            .width('100%')
            .fontSize(13)
            .fontColor('#64748B')
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F8FAFC')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('别滥用')

          Text('只是展示几段加粗文字，用 Text + Span 就够。用户要输入、选择、复制和编辑图文内容时，再考虑 RichEditor。')
            .width('100%')
            .fontSize(15)
            .fontColor('#475569')
            .lineHeight(24)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#EFF6FF')
        .borderRadius(8)
      }
      .width('100%')
      .padding(20)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}