1# RichEditor (系统接口) 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @carnivore233--> 5<!--Designer: @pssea--> 6<!--Tester: @mateng_Holtens--> 7<!--Adviser: @HelloCrease--> 8 9支持图文混排和文本交互式编辑的组件。 10 11> **说明：** 12> 13> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> 当前页面仅包含本模块的系统接口，其他公开接口参见[RichEditor](ts-basic-components-richeditor.md)。 16> 17## RichEditorBuilderSpanOptions<sup>11+</sup> 18 19添加builder的偏移位置和builder样式信息。 20 21**系统能力：** 此接口为系统接口。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25| 名称 | 类型 | 必填 | 说明 | 26| ------ | ------ | ---- | ------------------------------------- | 27| dragBackgroundColor<sup>18+</sup> | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 添加builder单独拖拽时的背板背景颜色。不配置或者异常值时，颜色按系统默认配置。 | 28| isDragShadowNeeded<sup>18+</sup> | boolean | 否 | 添加builder单独拖拽时是否需要投影。不配置或者异常值时，默认需要投影。true表示需要投影，false表示不需要投影。<br/>默认值： true | 29 30## RichEditorGesture<sup>11+</sup> 31 32用户行为回调。 33 34**系统能力：** 此接口为系统接口。 35 36**系统能力：** SystemCapability.ArkUI.ArkUI.Full 37 38| 名称 | 类型 | 必填 | 说明 | 39| ----------- | ---------- | ---- | ------------- | 40| onDoubleClick<sup>14+</sup> | Callback\<[GestureEvent](ts-gesture-common.md#gestureevent对象说明)\> | 否 | [GestureEvent](ts-gesture-common.md#gestureevent对象说明)为用户双击事件。<br/>双击完成时回调事件。| 41 42## RichEditorChangeValue<sup>12+</sup> 43 44**系统能力：** 此接口为系统接口。 45 46**系统能力：** SystemCapability.ArkUI.ArkUI.Full 47 48| 名称 | 类型 | 必填 | 说明 | 49| --- | --- | --- | --- | 50| changeReason<sup>20+</sup> | [TextChangeReason](ts-text-common.md#textchangereason20) | 否 | 组件内容变化的原因。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 51 52## 示例 53 54### 示例1（获取组件内容变化原因） 55从API version 20开始，该示例通过onWillChange接口返回的changeReason获取组件内容变化的原因。 56 57```ts 58@Entry 59@Component 60struct RichEditorExample { 61 controller: RichEditorController = new RichEditorController() 62 options: RichEditorOptions = { controller: this.controller } 63 64 build() { 65 Column() { 66 RichEditor(this.options) 67 .height('25%') 68 .width('100%') 69 .border({ width: 1, color: Color.Blue }) 70 .onWillChange((value: RichEditorChangeValue) => { 71 console.log('onWillChange, changeReason=' + value.changeReason) 72 return true 73 }) 74 } 75 } 76} 77``` 78 79### 示例2（设置自定义布局拖拽背板及拖拽投影配置） 80从API version 18开始，该示例通过使用addBuilderSpan接口中的[dragBackgroundColor](#richeditorbuilderspanoptions11)和[isDragShadowNeeded](#richeditorbuilderspanoptions11)在拖拽场景中为自定义布局的拖拽背板和拖拽投影设置相关参数。 81 82```ts 83// xxx.ets 84import { ColorMetrics } from '@kit.ArkUI'; 85 86@Entry 87@Component 88struct richEditorNew03 { 89 controller: RichEditorController = new RichEditorController(); 90 options: RichEditorOptions = { controller: this.controller } 91 build() { 92 Column({ space: 10 }) { 93 Column() { 94 RichEditor(this.options) 95 .onReady(() => { 96 this.controller.addBuilderSpan(() => { 97 this.placeholderBuilder() 98 }, { 99 offset: -1, 100 dragBackgroundColor: ColorMetrics.rgba(0xff, 0x80, 0, 0xff), 101 isDragShadowNeeded: false 102 }) 103 this.controller.addBuilderSpan(() => { 104 this.placeholderBuilder() 105 }, { 106 offset: -1, 107 dragBackgroundColor: ColorMetrics.resourceColor("#ffff0000") 108 .blendColor(ColorMetrics.resourceColor("#ff00ff00")), 109 isDragShadowNeeded: true 110 }) 111 this.controller.addBuilderSpan(() => { 112 this.placeholderBuilder() 113 }, { offset: -1 }) 114 }) 115 .borderWidth(1) 116 .width("100%") 117 .height("50%") 118 .margin(50) 119 } 120 .width('100%') 121 .margin({top:100}) 122 } 123 } 124 125 @Builder 126 placeholderBuilder() { 127 Row() { 128 Text('是BuilderSpan，不是纯文本内容') 129 .fontSize(22) 130 .copyOption(CopyOptions.InApp) 131 } 132 } 133} 134``` 135
