You can add a WYSIWYG text field area using UI Component form in Magento 2 backend. With Wysiwyg, you can also add a page builder option to edit content using the page builder.
Use formElement as wysiwyg in XML file with field like <field name=”description” template=”ui/form/field” sortOrder=”10″ formElement=”wysiwyg”>
Add below XML code snippet to use Wysiwyg in custom form UI component,
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 28 29 30 31 32 33 34 35 36 37 38 | <?xml version="1.0" encoding="UTF-8"?> <!-- /** * Rakesh Jesadiya */ --> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <fieldset name="general" sortOrder="5"> <field name="content" sortOrder="10" formElement="wysiwyg" template="ui/form/field"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="source" xsi:type="string">page</item> <item name="wysiwygConfigData" xsi:type="array"> <item name="is_pagebuilder_enabled" xsi:type="boolean">false</item> <item name="toggle_button" xsi:type="boolean">true</item> <item name="height" xsi:type="string">200px</item> <item name="add_variables" xsi:type="boolean">true</item> <item name="add_widgets" xsi:type="boolean">true</item> <item name="add_images" xsi:type="boolean">true</item> <item name="add_directives" xsi:type="boolean">true</item> </item> </item> </argument> <settings> <label translate="true">Contents</label> <dataScope>content</dataScope> </settings> <formElements> <wysiwyg> <settings> <rows>5</rows> <wysiwyg>true</wysiwyg> </settings> </wysiwyg> </formElements> </field> </fieldset> </form> |
template=”ui/form/field” Default template used for Wysiwyg.
is_pagebuilder_enabled value is boolean if you set yes, page builder will be displayed instead of Wysiwyg.
toggle_button — Add toggle button with text Show/Hide editor button.
add_variables — Add Button with text insert variable.
add_widgets — Add Button with text Insert widget button
add_images — Add Button with text insert image button
<rows> indicates the no. of rows for the Wysiwyg.