鸿蒙RichEditor

实现多行文本可以改变颜色和计数的效果~RichEditor

import { Log } from '@tencent/wechat_open_sdk';
@Preview
@Entry
@Component
struct CeshiPage {@State noteTitle: string = ''@State isEditing: boolean = falsecontroller: RichEditorController = new RichEditorController();options: RichEditorOptions = { controller: this.controller };// 工具栏状态@State isBold: boolean = false@State isItalic: boolean = false@State currentFontSize: number = 16@State currentColor: Color = Color.Black@State characterCount: number = 0@State maxCharacters: number = 280build() {Column() {// 字符计数显示Row() {Text(`${this.characterCount}/${this.maxCharacters}`).fontSize(14).fontColor(this.characterCount > this.maxCharacters ? Color.Red : Color.Gray)}.width('100%').margin({ bottom: 8 })// 富文本编辑器RichEditor(this.options).placeholder('分享你的想法...').onIMEInputComplete((value: RichEditorTextSpanResult) => {console.info("spanIndex:" + value.spanPosition.spanIndex);console.info("spanRange:[" + value.spanPosition.spanRange[0] + "," + value.spanPosition.spanRange[1] + "]");console.info("offsetInSpan:[" + value.offsetInSpan[0] + "," + value.offsetInSpan[1] + "]");console.info("value:" + value.value);}).onDeleteComplete(() => {}).onSelectionChange((range: RichEditorRange) => {console.info("onSelectionChange, (" + range.start + "," + range.end + ")");this.characterCount=range.end!!+0}).width('100%').height(120).borderRadius(8).backgroundColor(Color.White).padding(12).borderWidth(2).margin(10).borderColor(Color.Gray)}}updateCharacterCount() {// 计算当前字符数let spans = this.controller.getSpans()let totalChars = 0spans.forEach(item => {// 根据实际的span结构计算字符数// 注意：具体的span结构需要参考官方文档totalChars = item.spanPosition.spanIndex;this.characterCount = totalChars})}
}