I'm creating my own extension that adds a widget with a WYSIWYG-editor. I found a tutorial about this subject: http://www.magebuzz.com/blog/magento-2-add-wysiwyg-editor-text-area-in-custom-widget/.

This code does add a WYSIWYG editor, but it does not work well. It's buggy, for example:

  • When I insert HTML, save the widget, reopen the widget the widget itself is added to the WYSIWYG editor of the widget.
  • Update does not work at all.

What is the proper way to create a widget with WYSIWYG-editor?

  • Did you found any solution regarding this issue? Commented Nov 28, 2018 at 6:03

1 Answer 1


In magento 2.4 I fixed this by implementing it with a textarea and parse it afterwards with JS. I got inspired by core module: Magento\Catalog\Block\Adminhtml\Helper\Form\Wysiwyg;

    class Editor extends \Magento\Backend\Block\Template

    const TEXT_AREA_ID = 'stepsContentWidget';

    protected $_elementFactory;

     * @var SecureHtmlRenderer
    protected $secureRenderer;

     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Framework\Data\Form\Element\Factory $elementFactory
     * @param array $data
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Data\Form\Element\Factory $elementFactory,
        ?SecureHtmlRenderer $secureRenderer = null,
        array $data = []
        $this->secureRenderer = $secureRenderer ?? ObjectManager::getInstance()->get(SecureHtmlRenderer::class);
        $this->_elementFactory = $elementFactory;
        parent::__construct($context, $data);

     * Prepare chooser element HTML
     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element Form Element
     * @return \Magento\Framework\Data\Form\Element\AbstractElement
    public function prepareElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
        $input = $this->_elementFactory->create("textarea", ['data' => $element->getData()]);
        $input->setClass("widget-option input-textarea admin__control-text");
        if ($element->getRequired()) {

        $element->setData('after_element_html', $input->getElementHtml() . $this->addAfterHtmlJs() . $this->getAfterElementHtmlCss());
        return $element;

    public function addAfterHtmlJs()
        $scriptString = <<<HTML
            ], function(jQuery){
                wysiwygcompany_description = new wysiwygSetup('{$this->getHtmlId()}', {
                        "width":"100%%",  // defined width of editor
                        "height":"200px", // height of editor
                        "plugins":[], // for image
                        "tinymce4":{"toolbar":"formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table charmap","plugins":"advlist autolink lists link charmap media noneditable table contextmenu paste code help table",
        return $this->secureRenderer->renderTag('script', [], $scriptString, false);

     * @return string
    protected function getAfterElementHtmlCss() {
        $html = <<<HTML
            .admin__field-control.control .control-value {
                display: none !important;
        return $html;

    public function getHtmlId()
        return self::TEXT_AREA_ID;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.