> ## Documentation Index > Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt > Use this file to discover all available pages before exploring further. # EditorField Rich Text Editor > Reference for the EditorField rich text editor component. Learn about its capabilities and how to read and write content to support rich media layouts and complex formatting. ## When to Use * When users need to apply complex formatting to text. * When users need to display a mix of text and images. ## Component Example ## Component Properties | Attribute | Description | Type | Default | | ------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `behavior` | Display state of the form component. | [Behavior](/open/yida/components/interface#behavior) | `'NORMAL'` | | `config` | General configuration. | `object` | `{ "statusbar": false, "menubar": false, "toolbar1": "undo redo bold italic underline strikethrough \| fontselect fontsizeselect forecolor backcolor \| alignleft aligncenter alignright alignjustify \| bullist numlist outdent indent \| table link image media upload \| code \| fullscreen \| variable \| removeformat", "toolbar2": false, "height": 300, "fontsize_formats": "8px 10px 12px 14px 16px 18px 24px 36px 48px", "visual": true, "keep_values": false, "forced_root_block": "div", "plugins": [ "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table contextmenu paste code", "colorpicker", "upload", "placeholder", "variable", "noneditable" ] } { "statusbar": false, "menubar": false, "toolbar1": "undo redo bold italic underline strikethrough \| fontselect fontsizeselect forecolor backcolor \| alignleft aligncenter alignright alignjustify \| bullist numlist outdent indent \| table link image media upload \| code \| fullscreen \| variable \| removeformat", "toolbar2": false, "height": 300, "fontsize_formats": "8px 10px 12px 14px 16px 18px 24px 36px 48px", "visual": true, "keep_values": false, "forced_root_block": "div", "plugins": [ "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table contextmenu paste code", "colorpicker", "upload", "placeholder", "variable", "noneditable" ] }` | | `label` | Title of the form component. | `string` | - | | `labelAlign` | Position of the form component title. | `'left' \| 'top'` | `'top'` | | `labelColOffset` | Offset position of the title, expressed as a grid value where 1 represents 1/24. | `number` | `0` | | `labelColSpan` | Width of the title in grid units, where 1 represents 1/24. | `number` | `4` | | `labelTextAlign` | Text alignment of the form component title. | `'left' \| 'right'` | `'right'` | | `labelTipsIcon` | Icon that serves as the entry point for the title tips. Takes effect when `labelTipsTypes` is set to **text** or **render**. | `string` | - | | `labelTipsRender` | Custom render method for the title tips. Takes effect when `labelTipsTypes` is set to **render**. | `(props: IComponentProps) => ReactNode` | - | | `labelTipsText` | Text content of the title tips. Takes effect when `labelTipsTypes` is set to **text**. | `string` | - | | `labelTipsTypes` | Type setting for the form component title tips. | [LabelTipsTypes](/open/yida/components/interface#labeltipstypes) | `'none'` | | `onChange` | Triggered when the value changes. | `({ value : string }) => void` | - | | `placeholder` | Placeholder text. | `string` | `'Please enter'` | | `size` | Size of the form component. | [Size](/open/yida/components/interface#size) | `'medium'` | | `tips` | Description of the form component, displayed below the control. | `string` | - | | `uploadConfig` | Image upload configuration. | [UploadConfig](/open/yida/components/interface#uploadconfig) | `{}` | | `validation` | Form component validation settings. See the [form validation documentation](/open/yida/guide/concept/validation) for details. | [Validation\[\]](/open/yida/components/interface#validation) | `[]` | | `value` | Default value of the rich text. | `string` | - | | `wrapperColOffset` | Offset position of the form component, expressed as a grid value where 1 represents 1/24. | `number` | `0` | | `wrapperColSpan` | Width of the form component in grid units, where 1 represents 1/24. | `number` | `0` |