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 !