Add Page Builder Editor In Magento 2.4.5 Configuration Section

Question

I want to add Add Page Builder Editor In Magento 2.4.5 Configuration Section.

Any insight would be helpful.

Thank you :)

Answer 1

Could you please try below method, hope this will help!

1. Create a new system configuration section in your module's system.xml file:

   <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
        <system>
            <tab id="yourtab" translate="label" sortOrder="100">
                <label>Your Tab Label</label>
            </tab>
            <section id="yoursection" translate="label" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
                <class>separator-top</class>
                <label>Your Section Label</label>
                <tab>yourtab</tab>
                <resource>Vendor_Module::config</resource>
                <group id="yourgroup" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Your Group Label</label>
                    <field id="yourfield" translate="label comment" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                        <label>Your Field Label</label>
                        <frontend_model>Vendor\Module\Block\Adminhtml\System\Config\Field\PageBuilderEditor</frontend_model>
                    </field>
                </group>
            </section>
        </system>
    </config>
   

2. Create a new block class PageBuilderEditor.php at Vendor\Module\Block\Adminhtml\System\Config\Field and define the toHtml() method to return the HTML for the Page Builder Editor field:

    <?php
    namespace Vendor\Module\Block\Adminhtml\System\Config\Field;
   
    class PageBuilderEditor extends \Magento\Config\Block\System\Config\Form\Field
    {
        protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
        {
            $editor = $this->_layout->createBlock(\Magento\Cms\Block\Adminhtml\Page\Edit\Tab\Content::class)
                ->setData([
                    'id' => $element->getId(),
                    'name' => $element->getName(),
                    'content' => $element->getValue(),
                    'wysiwyg' => true
                ]);
   
            return $editor->toHtml();
        }
    }