x
1
2
<div data-react-class="Wysiwyg" data-react-props="{"currentValue":"\u003ch1\u003eTeste\u003c/h1\u003e\n123","name":"protocol_element[name]","isSmallTheme":false,"app":"core","lang":"en","dropkiqPreviewId":"wysiwyg-protocol_element[name]"}" data-react-cache-id="Wysiwyg-0"></div><!-- div id="wysiwyg-protocol_element[name]" class='dropkiq-preview'></!-->WYSIWYG
A WYSIWYG ("What You See Is What You Get") component is a text editor that allows users to create and format content with immediate visual feedback. This component enables non-technical users to format text and apply basic styling options like bold, italics, lists, and hyperlinks—without needing to understand HTML or other markup languages.
Related components
| Used Components | Components where is Used |
|---|---|
| None | None |
✅ Do
- Use in content-heavy areas where non-technical users need flexibility
❌ Don't
- Don’t use for single-line or simple text fields. Avoid using WYSIWYG for short inputs or fields where users only need basic text (e.g., subject lines, labels, or titles). A standard text input is better suited here.
1
render(LooposUi::Wysiwyg.new(initial_value: initial_value, small: small, input_name: input_name, language: language, app: app))No notes provided.
| Param | Description | Input |
|---|---|---|
|
Initial text in editor |
|
|
|
Small version of the component |
|
|
|
Name to use in input for a form |
|
|
|
Component's language |
|
|
|
App type to override UI (all types + neutral) |
|
WYSIWYG
An editor for rich-text content.
Arguments
| Property | Default | Description |
|---|---|---|
initial_value |
`` | Initial/previous text in editor |
small |
false |
Small version of the component |
input_name |
`` | Name to use in input to pass to form |
language |
en |
Choices: [pt, en] - Component's language |
app |
UI App type | Choices: [all app types, neutral] - App type to override UI |
Slots
No slots.