DevOps:Doc/FlexForm/2.0, 2.1, 2.5, 2.9/WYSIWYG
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
As of version 2.9.0 FlexForm comes with the TrumboWyg WYSIWYG editor for textareas.


When use add <code>editor="trumbo"</code> as an argument to a textarea, it will by default add the TrumboWyg editor to the textarea with all supported options: Heading formats, bold, italic, underline, delete, superscript and subscript. See example 1.
If you add the <code>data-btns</code> argument to the textarea as well, you can define what buttons you want to use.
Button options are:
Drop down menus:
* headings
* styles
* lists
* justify
Single items:
* p
* h1
* h2
* h3
* h4
* preformatted
* bold
* italic
* underline
* del
* pre
* superscript
* subscript
* removeformat
* unorderedList
* orderedList'
* justifyLeft
* justifyCenter
* justifyRight
* justifyFull
* horizontalRule
See example 2.
=== Example 1 ===
<syntaxhighlight lang="php">
<form>
<textarea editor="trumbo"name="Content"</textarea>
</form>
</syntaxhighlight>
=== Example 2 ===
<syntaxhighlight lang="php">
<form>
<textarea editor="trumbo"name="Content" data-btns="bold,italic"></textarea>
</form>
</syntaxhighlight>
ws-base-props
Line 1: Line 1:
{{Base properties
{{Base properties
|Title=WHYIWYG
|Title=WYSIWYG
|Class=Doc
|Class=Doc
}}
}}

Latest revision as of 15:39, 22 May 2026

As of version 2.9.0 FlexForm comes with the TrumboWyg WYSIWYG editor for textareas.

When use add editor="trumbo" as an argument to a textarea, it will by default add the TrumboWyg editor to the textarea with all supported options: Heading formats, bold, italic, underline, delete, superscript and subscript. See example 1.

If you add the data-btns argument to the textarea as well, you can define what buttons you want to use.

Button options are:

Drop down menus:

  • headings
  • styles
  • lists
  • justify

Single items:

  • p
  • h1
  • h2
  • h3
  • h4
  • preformatted
  • bold
  • italic
  • underline
  • del
  • pre
  • superscript
  • subscript
  • removeformat
  • unorderedList
  • orderedList'
  • justifyLeft
  • justifyCenter
  • justifyRight
  • justifyFull
  • horizontalRule

See example 2.

Example 1

<form>
<textarea editor="trumbo"name="Content"</textarea>
</form>

Example 2

<form>
<textarea editor="trumbo"name="Content" data-btns="bold,italic"></textarea>
</form>