LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div>
  <div>
    <h2>Default</h2>
    <div data-react-class="Wysiwyg" data-react-props="{"currentValue":null,"name":"","isSmallTheme":false,"app":"core","lang":"en","dropkiqPreviewId":"wysiwyg-"}" data-react-cache-id="Wysiwyg-0"></div>
    <!-- div id="wysiwyg-" class='dropkiq-preview'></!-->
  </div>
  <div>
    <h2>With initial data</h2>
    <div data-react-class="Wysiwyg" data-react-props="{"currentValue":"\u003ch1\u003eTeste\u003c/h1\u003e\n123","name":"","isSmallTheme":false,"app":"core","lang":"en","dropkiqPreviewId":"wysiwyg-"}" data-react-cache-id="Wysiwyg-0"></div>
    <!-- div id="wysiwyg-" class='dropkiq-preview'></!-->
  </div>
  <div>
    <h2>Default in PT</h2>
    <div data-react-class="Wysiwyg" data-react-props="{"currentValue":null,"name":"","isSmallTheme":false,"app":"core","lang":"pt","dropkiqPreviewId":"wysiwyg-"}" data-react-cache-id="Wysiwyg-0"></div>
    <!-- div id="wysiwyg-" class='dropkiq-preview'></!-->
  </div>
  <div>
    <h2>Small</h2>
    <div data-react-class="Wysiwyg" data-react-props="{"currentValue":null,"name":"","isSmallTheme":true,"app":"core","lang":"en","dropkiqPreviewId":"wysiwyg-"}" data-react-cache-id="Wysiwyg-0"></div>
    <!-- div id="wysiwyg-" class='dropkiq-preview'></!-->
  </div>
  <div>
    <h2>Neutral</h2>
    <div data-react-class="Wysiwyg" data-react-props="{"currentValue":null,"name":"","isSmallTheme":false,"app":"neutral","lang":"en","dropkiqPreviewId":"wysiwyg-"}" data-react-cache-id="Wysiwyg-0"></div>
    <!-- div id="wysiwyg-" class='dropkiq-preview'></!-->
  </div>
</div>

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.

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div>
  <div>
    <h2>Default</h2>
    <%= render LooposUi::Wysiwyg.new %>
  </div>
  <div>
    <h2>With initial data</h2>
    <%= render LooposUi::Wysiwyg.new(initial_value: "<h1>Teste</h1>\n123") %>
  </div>
  <div>
    <h2>Default in PT</h2>
    <%= render LooposUi::Wysiwyg.new(language: :pt) %>
  </div>
  <div>
    <h2>Small</h2>
    <%= render LooposUi::Wysiwyg.new(small: true) %>
  </div>
  <div>
    <h2>Neutral</h2>
    <%= render LooposUi::Wysiwyg.new(app: :neutral) %>
  </div>
</div>

No notes provided.

No params configured.

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.