系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》

在本博客中，我将指导您完成在Magento 2中将图像字段添加到CMS页面的步骤。

在Magento 2中，CMS（内容管理系统）在管理静态页面（例如主页，关于我们页面和联系页面）方面起着至关重要的作用。默认情况下，Magento 2提供用于CMS页面上的内容编辑的文本字段。但是，在某些情况下，您可能希望包含图像以丰富内容并为客户提供视觉上吸引人的体验。

让我们看一下如何在Magento 2的CMS页面上添加图像字段的步骤。

在Magento 2的CMS页面上添加图像字段的步骤：

步骤1： 第一步，我们需要在扩展名内部的以下路径创建一个db_schema.xml文件。

{{magento_root}}/app/code/Vendor/Module/etc/db_schema.xml

现在添加代码，如下所示。

<?xml version="1.0"?>
<schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Setup/Declaration/Schema/etc/schema.xsd">
    <table name="cms_page" resource="default" engine="innodb" comment="Cms Page">
        <column length="255" name="custom_image" nullable="false" xsi:type="varchar"/>
    </table>
</schema>

步骤2：之后，我们需要创建一个cms_page_form.xml来定义CMS页面表单，其中图像字段文件位于扩展名内的以下路径。

{{magento_root}}/app/code/Vendor/Module/view/adminhtml/ui_component/cms_page_form.xml

然后包括下面提到的代码

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="content">
        <field name="custom_image" formElement="imageUploader">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="label" xsi:type="string" translate="true">Page Image</item>
                    <item name="formElement" xsi:type="string">imageUploader</item>
                    <item name="source" xsi:type="string">page</item>
                    <item name="sortOrder" xsi:type="number">30</item>
                    <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
                    <item name="required" xsi:type="boolean">false</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

第三步：之后，我们需要在以下路径的扩展名中的 event.xml 文件中注册观察者文件。

{{magento_root}}/app/code/Vendor/Module/etc/events.xml

并添加以下代码段

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="cms_page_prepare_save">
        <observer name="custom_cms_image" instance="Vendor\Module\Observer\SaveCustomImage" />
    </event>
</config>

第4步： 最后，我们需要将上传的图像保存在扩展名内的观察者文件中，位于以下路径。

{{magento_root}}/app/code/Vendor/Module/Observer/SaveCustomImage.php

现在添加代码，如下所述

<?php
namespace Vendor\Module\Observer;
 
use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\App\Request\DataPersistorInterface;
use Magento\Framework\Filesystem;
use Magento\MediaStorage\Model\File\UploaderFactory;
 
class SaveCustomImage implements ObserverInterface
{
    protected $dataPersistor;
    protected $uploaderFactory;
    protected $filesystem;
 
    public function __construct(
        DataPersistorInterface $dataPersistor,
        UploaderFactory $uploaderFactory,
        Filesystem $filesystem)
    {
        $this->dataPersistor = $dataPersistor;
        $this->uploaderFactory = $uploaderFactory;
        $this->filesystem = $filesystem;
    }
 
    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        $data = $this->dataPersistor->get('cms_page');
        if (!$data) {
            return;
        }
 
        $image = $data['custom_image'] ?? null;
        if ($image) {
            $uploader = $this->uploaderFactory->create(['fileId' => 'custom_image']);
            $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']);
            $uploader->setAllowRenameFiles(true);
            $uploader->setFilesDispersion(true);
            $mediaDirectory = $this->filesystem->getDirectoryRead(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA);
            $result = $uploader->save($mediaDirectory->getAbsolutePath('custom_cms_images'));
            $data['custom_image'] = 'custom_cms_images' . $result['file'];
        }
 
        $observer->getPage()->addData($data);
    }
}

输出：

结论：

您已成功将图像字段添加到Magento 2中的CMS页面。您还可以在Magento 2的后端CMS页面部分添加自定义按钮。