Form fields·loomora/TextEditor
⚙Related configs↗TextEditor
A rich text input that wraps TinyMCE React, with value/change callbacks and editor initialization options.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { TextEditor } from 'loomora'
<TextEditor label="Article body" properties={{
value, onChange: setValue, height: 320, toolbar: 'bold italic | bullist numlist',
}} />API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| properties.value / onChange | string / (content: string) => void | — | Controlled HTML content. |
| properties.initialValue | string | — | Initial content for uncontrolled usage. |
| properties.height | number | string | 420 | Editor height. |
| properties.plugins / toolbar | TinyMCE options | configured defaults | Editor plugin and toolbar setup. |
| properties.disabled / required | boolean | false | Editor interaction and required states. |
| onBlur | (content: string) => void | — | Receives editor content on blur. |