Magento 2：在系统配置中向动态字段添加所见即所得编辑器

目录

  1. 介绍
  2. 了解Magento 2中的所见即所得
  3. 向动态字段添加所见即所得编辑器
  4. 结论
  5. 常见问题

介绍

使用Magento 2构建强大的电子商务平台通常需要对其广泛的功能和自定义选项有深入理解。如果您是一个与Magento 2一起开发的开发人员，您可能会遇到需要在系统配置的动态字段中添加所见即所得（What You See Is What You Get）编辑器的情况。该编辑器可以极大地提高基于文本的字段的易用性和外观，为创建和编辑内容提供了更直观的方式。

尽管Magento 2提供了实现所见即所得编辑器的框架，但这个过程可能会很棘手，有许多潜在的问题。本博客文章将为您详细介绍如何向Magento 2的系统配置中的动态字段添加所见即所得编辑器的必要步骤。通过本文，您将对此过程有更清晰的了解，并获得下一个项目的实际解决方案。

让我们深入了解详细的过程，了解每个步骤的重要性，并确保您可以有效地将所见即所得编辑器添加到动态字段中。

了解Magento 2中的所见即所得

什么是所见即所得编辑器？

所见即所得编辑器为用户提供了一个友好的界面，可以直接在平台上编辑文本和媒体，并以与最终产品中的外观密切相似的形式显示内容。与基于文本的编辑相比，这种视觉反馈可以使用户的操作更直观。

在Magento 2中，所见即所得编辑器简化了富文本内容的创建。它在用户经常更新内容的部分尤其有用，例如产品描述、博客文章和CMS页面。

为什么要集成所见即所得编辑器？

将所见即所得编辑器集成到Magento 2的系统配置中可以通过提供一种直观的、可视化的方式来管理内容，提高用户体验。这样一来，非开发人员也可以轻松管理网站，无需了解HTML或CSS。

向动态字段添加所见即所得编辑器

逐步实施

要成功地将所见即所得编辑器添加到Magento 2的系统配置中的动态字段中，请按照以下步骤操作：

1. 更新system.xml文件

第一步是更新system.xml文件，该文件定义了系统配置字段。您需要指定字段类型，并确保其准备好渲染所见即所得编辑器。

示例system.xml配置：

<config>
    <system>
        <section id="custom_section">
            <group id="custom_group">
                <field id="custom_field" translate="label" type="textarea">
                    <label>自定义字段标签</label>
                    <backend_model>Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</backend_model>
                    <frontend_model>Vendor\Module\Block\Adminhtml\System\Config\Form\Field\Wysiwyg</frontend_model>
                </field>
            </group>
        </section>
    </system>
</config>

2. 创建自定义块

为了渲染所见即所得编辑器，请创建一个自定义块，该块扩展了Magento 2表单字段类。该块将初始化所见即所得编辑器，并确保正确显示。

示例自定义块：

<?php

namespace Vendor\Module\Block\Adminhtml\System\Config\Form\Field;

use Magento\Framework\Data\Form\Element\AbstractElement;
use Magento\Backend\Block\Widget\Form\Renderer\Fieldset as FieldsetRenderer;

class Wysiwyg extends FieldsetRenderer
{
    protected $_wysiwygConfig;

    public function __construct(
        \Magento\Backend\Block\Context $context,
        \Magento\Cms\Model\Wysiwyg\Config $wysiwygConfig,
        array $data = []
    ) {
        $this->_wysiwygConfig = $wysiwygConfig;
        parent::__construct($context, $data);
    }

    public function render(AbstractElement $element)
    {
        $element->setWysiwyg(true);
        $element->setConfig($this->_wysiwygConfig->getConfig());
        return parent::render($element);
    }
}

此代码片段演示了准备所见即所得编辑器配置并设置其在系统配置中显示的自定义块类。

3. 添加JavaScript依赖项

Magento 2需要特定的JavaScript组件来渲染所见即所得编辑器。确保在管理面板中加载这些依赖项。

示例requirejs-config.js：

var config = {
    map: {
        '*': {
            wysiwygSetup: 'mage/adminhtml/wysiwyg/tiny_mce/setup'
        }
    }
};

4. 创建模板

您可能需要一个自定义模板来初始化和渲染自定义块中的所见即所得编辑器。将此模板文件放在正确的位置，并从自定义块引用它。

示例模板：

<div class="admin__field">
    <label class="label" for="{$elementId}">
        <span>{$elementLabel}</span>
    </label>
    <div class="value">
        {$elementHtml}
    </div>
</div>
<script>
    require(['wysiwygSetup'], function (wysiwygSetup) {
        wysiwygSetup({
            settings: {$wysiwygConfig}
        });
    });
</script>

5. 清除缓存和测试

完成这些更改后，清除Magento缓存以确保正确加载更新。在管理面板中导航到系统配置部分，测试所见即所得编辑器是否出现在动态字段中。

结论

将所见即所得编辑器集成到Magento 2的系统配置字段中可以极大地提高内容管理的易用性和可访问性。此过程涉及在system.xml中定义配置，在自定义块中创建初始化编辑器的类，以及设置所需的JavaScript依赖项。通过遵循这些详细步骤，您可以充分利用所见即所得编辑器的功能，为您的Magento 2应用程序中的动态字段增添内容。

常见问题

如果所见即所得编辑器没有显示，我该如何排除故障？

确保您正确配置了system.xml文件和自定义块。还要验证所需的JavaScript文件是否正确加载。在浏览器控制台检查任何JavaScript错误，可以帮助识别问题。

除了文本区域之外，该方法是否适用于其他字段？

是的，相同的方法可以适用于其他字段类型，例如文本字段或甚至自定义元素。关键是适当调整自定义块和所见即所得配置。

是否可以使用不同的所见即所得编辑器？

尽管Magento 2主要将TinyMCE作为默认的所见即所得编辑器集成，但您可以通过自定义JavaScript设置和配置来实现其他编辑器。

通过在系统配置中使用所见即所得编辑器来增强您的Magento 2设置，提供卓越的、用户友好的体验，简化内容管理过程，并使更多的用户能够访问。