Ecommerce | 07-02-201721 janvier 2021

Ajouter l’éditeur wysiwyg dans la configuration de Magento 2

Il peut être utile d’afficher l’éditeur wysiwyg dans un champ de configuration avec Magento 2.

Comme pour magento 1, le champ qui permet d’afficher l’éditeur dans la configuration n’existe pas.

Nous allons donc voir dans ce tutorial l’ajout d’un nouveau champ qui va nous permettre d’afficher l’éditeur wysiwyg.

Pour cela, on va créer un module Editor qui sera dans le namespace Pixel, ce qui donne cette arborescence :

app/code/Pixel/Editor

On va enregistrer notre module en créant respectivement les fichiers module.xml et registration.php.

Pour le fichier module.xml, on va le mettre dans le répertoire etc :

app/code/Pixel/Editor/etc/module.xml

Avec le code suivant

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Pixel_Editor" setup_version="1.0.0"> </module></config> 

Pour le fichier registration.php, on va le mettre à la racine du module :

app/code/Pixel/Editor/registration.php

Avec le code suivant :

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Pixel_Editor',
    __DIR__
);

Ensuite nous allons créer le fichier Editor.php pour ajouter notre champ permettant l’affichage de l’éditeur wysiwyg :

app/code/Pixel/Editor/Block/Adminhtml/System/Config/Editor.php

Avec le code suivant :

namespace Pixel\Editor\Block\Adminhtml\System\Config;

use Magento\Framework\Registry;
use Magento\Backend\Block\Template\Context;
use Magento\Cms\Model\Wysiwyg\Config as WysiwygConfig;
use Magento\Framework\Data\Form\Element\AbstractElement;

class Editor extends \Magento\Config\Block\System\Config\Form\Field
{
    /**
     * @var  Registry
     */
    protected $_coreRegistry;

    /**
     * @param Context       $context
     * @param WysiwygConfig $wysiwygConfig
     * @param array         $data
     */
    public function __construct(
        Context $context,
        WysiwygConfig $wysiwygConfig,
        array $data = []
    ) {
        $this->_wysiwygConfig = $wysiwygConfig;
        parent::__construct($context, $data);
    }

    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $element->setWysiwyg(true);
        $element->setConfig($this->_wysiwygConfig->getConfig($element));
        return parent::_getElementHtml($element);
    }
}

Et voilà, vous pouvez désormais afficher l’éditeur via un champ dans la configuration de votre module, simple non ?

Voici un exemple à mettre dans le fichier de configuration de votre module pour afficher l’éditeur :

<field id="footer_text" translate="label comment" sortOrder="1" type="editor" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1" > <label>Contenu</label> <frontend_model>Pixel\Editor\Block\Adminhtml\System\Config\Editor</frontend_model></field>

A partir de là vous pouvez lancer la commande pour installer module :

php bin/magento setup:upgrade

Il faudra certainement lancer la commande Deploy. Pensez également à vider le cache.

Voici le rendu de l’éditeur dans un champs de configuration de Magento :

Maintenant, c’est à vous de jouer !