Article publié le

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 :

Ajouter l'éditeur dans un champ de configuration dans Magento 2

Maintenant, c'est à vous de jouer !

Fermer

Télémaintenance

Pour assurer notre support à distance, nous avons opté pour la solution TeamViewer.
Pour installer l'application, merci de télécharger l'application en fonction de votre système d'exploitation :


Télécharger TeamViewer pour Windows

Télécharger TeamViewer pour Mac OS

Télécharger TeamViewer pour Linux


Les avantages de l'assistance à distance pour la maintenance de votre site sont nombreux :

  • Dépannage plus rapide lié à l'absence de manipulations expliquées par téléphone
  • Constatation directe du problème rencontré
  • Economie des frais de déplacement
  • Gain de temps important, car pas de déplacement, prise de rendez-vous
Fermer

Nous suivre

Si vous souhaitez nous suivre sur les réseaux sociaux, c'est par ici :


Facebook

Google +