一、组件介绍

RichEditor组件是HarmonyOS NEXT提供的富文本编辑器组件，它支持多种文本格式和样式的编辑，可以用于创建具有丰富文本内容的应用场景。

二、基本概念

1. 富文本编辑

富文本编辑是指在编辑文本时，可以对文本进行格式化处理，包括：

• 文字样式（粗体、斜体、下划线等）
• 文字颜色和背景色
• 文字大小和字体
• 段落对齐方式
• 项目符号和编号列表

2. 内容格式

RichEditor支持多种内容格式：

• 纯文本
• HTML格式
• 自定义格式化文本

三、组件属性

1. 基础属性

interface RichEditorAttribute {
  placeholder?: string                // 占位提示文本
  caretColor?: Color                  // 光标颜色
  fontColor?: Color                   // 默认文字颜色
  fontSize?: number | string          // 默认字体大小
  fontFamily?: string                 // 默认字体
  content?: string                    // 编辑器内容
  maxLength?: number                  // 最大输入长度
  inputFilter?: (value: string) => string  // 输入过滤器
}

2. 样式相关属性

interface RichEditorStyle {
  backgroundColor?: Color             // 背景颜色
  borderWidth?: number | string       // 边框宽度
  borderColor?: Color                 // 边框颜色
  borderRadius?: number | string      // 边框圆角
  padding?: number | string           // 内边距
}

3. 事件方法

interface RichEditorEvents {
  onChange: (value: string) => void   // 内容变化事件
  onFocus: () => void                 // 获得焦点事件
  onBlur: () => void                  // 失去焦点事件
  onError: (error: Error) => void     // 错误事件
}

四、使用

1. 基础用法

RichEditor({
  placeholder: '请输入内容',
  content: this.editorContent,
  onChange: (value: string) => {
    this.editorContent = value;
  }
})
.width('100%')
.height(200)
.backgroundColor(Color.White)
.padding(10)

2. 自定义样式

RichEditor({
  placeholder: '请输入内容',
  caretColor: Color.Blue,
  fontColor: Color.Black,
  fontSize: 16,
  fontFamily: 'HarmonyOS Sans'
})
.width('100%')
.height(300)
.backgroundColor('#F5F5F5')
.borderWidth(1)
.borderColor('#E0E0E0')
.borderRadius(8)
.padding(12)

3. 内容过滤

RichEditor({
  placeholder: '请输入内容',
  maxLength: 1000,
  inputFilter: (value: string) => {
    // 过滤HTML标签
    return value.replace(/<[^>]+>/g, '');
  }
})

4. 事件处理

RichEditor({
  placeholder: '请输入内容',
  onChange: (value: string) => {
    console.log('内容变化：', value);
  },
  onFocus: () => {
    console.log('获得焦点');
  },
  onBlur: () => {
    console.log('失去焦点');
  },
  onError: (error: Error) => {
    console.error('发生错误：', error);
  }
})

五、最佳实践

1. 内容初始化

@State editorContent: string = ''

AboutToAppear() {
  // 从服务器获取初始内容
  this.getInitialContent().then(content => {
    this.editorContent = content;
  });
}

2. 内容验证

validateContent(content: string): boolean {
  if (content.length < 10) {
    prompt.showToast({
      message: '内容不能少于10个字符'
    });
    return false;
  }
  return true;
}

3. 工具栏集成

Column() {
  Row() {
    Button('粗体')
      .onClick(() => this.toggleBold())
    Button('斜体')
      .onClick(() => this.toggleItalic())
    Button('下划线')
      .onClick(() => this.toggleUnderline())
  }
  .width('100%')
  .height(40)
  .padding(5)
  
  RichEditor({
    placeholder: '请输入内容',
    content: this.editorContent
  })
}

六、总结

本文详细介绍了 HarmonyOS NEXT 中的 RichEditor 组件及其使用方法。RichEditor 是一个功能强大的富文本编辑器组件，支持多种文本格式和样式的编辑，包括文字样式、颜色、字体、段落对齐、列表等。通过基础属性和样式属性，可以实现丰富的编辑功能和自定义外观；通过事件方法，可以处理用户交互和内容变化。