Magento 2 Ui 组件所见即所得答案

【问题标题】：Magento 2 Ui Component wysiwygMagento 2 Ui 组件所见即所得
【发布时间】：2017-03-15 08:00:24
【问题描述】：

在 Magento 2 中，我们如何使用表单 ui 组件 xml 文件添加带有文本区域字段的 WYSIWYG 编辑器？要添加文本区域，我在 xml 文件中使用以下代码。

<field name="detail">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">textarea</item>
                    <item name="source" xsi:type="string">sample_shop</item>
                    <item name="label" xsi:type="string">Detail</item>
                </item>
            </argument>
        </field>

【问题讨论】：

标签： magento magento2

【解决方案1】：

从 Magento 2.2 开始，以下也可以工作。并且具有更好的可读性和可用性。

    <field name="content" formElement="wysiwyg">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">block</item>
            </item>
        </argument>
        <settings>
            <additionalClasses>
                <class name="admin__field-wide">true</class>
            </additionalClasses>
            <validation>
                <rule name="required-entry" xsi:type="boolean">true</rule>
            </validation>
            <label/>
            <dataScope>content</dataScope>
        </settings>
        <formElements>
            <wysiwyg>
                <settings>
                    <wysiwyg>true</wysiwyg>
                </settings>
            </wysiwyg>
        </formElements>
    </field>

【讨论】：

此答案具有更新的 Magento xml 参数，因此对于最近遇到此问题的任何人来说都比接受的答案更好。

【解决方案2】：

在你的 ui 组件表单 xml 文件中添加这样的字段。

 <field name="detail">
            <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">sample_shop</item>
                    <item name="label" xsi:type="string">Detail</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">detail</item>
                    <item name="sortOrder" xsi:type="number">50</item>
                    <item name="rows" xsi:type="number">8</item>
                </item>
            </argument>
        </field>

【讨论】：