Question

I have added a WYSIWYG field in my custom admin form but it's taking the full width of the form instead of matching other fields width.

Here is the screen-shot

Here is what I am using for this in ui_component

<field name="description">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Job Description</item>
                    <item name="formElement" xsi:type="string">wysiwyg</item>
                    <item name="source" xsi:type="string">job</item>
                    <item name="wysiwyg" xsi:type="boolean">true</item>
                    <item name="sortOrder" xsi:type="number">130</item>
                    <item name="dataScope" xsi:type="string">description</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
Was it helpful?

Solution

I made it work as the way I wanted. Just added text field with WYSIWYG enabled.

<field name="description">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">wysiwyg</item>
                    <item name="source" xsi:type="string">job</item>
                    <item name="label" xsi:type="string">Job Description</item>

                    <item name="template" xsi:type="string">ui/form/field</item>
                    <item name="wysiwyg" xsi:type="boolean">true</item>
                    <item name="dataScope" xsi:type="string">description</item>
                    <item name="sortOrder" xsi:type="number">130</item>
                    <item name="rows" xsi:type="number">8</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>

OTHER TIPS

Magento2 admin forms evolve and a given answer is not perhaps the best for the latest version.

In 2.3.x the crucial part is template:

    <field name="description" formElement="wysiwyg" template="ui/form/field" sortOrder="80">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">Fabric</item>
            </item>
        </argument>
        <settings>
            <validation>
                <rule name="required-entry" xsi:type="boolean">false</rule>
            </validation>
            <label translate="true">Description</label>
            <dataScope>description</dataScope>
        </settings>
        <formElements>
            <wysiwyg>
                <settings>
                    <wysiwyg>true</wysiwyg>
                </settings>
            </wysiwyg>
        </formElements>
    </field>

In order to display wysiwyg Ui Component smaller, You will require to add a Template into Field Tag like this:

template="ui/form/field

Here's the how you can use it.

<field name="ad_description" template="ui/form/field" sortOrder="50" formElement="wysiwyg">

I've tried in Magento 2.4 in Admin Ui Form.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top