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:
What is the proper way to create a widget with WYSIWYG-editor?
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->setId(self::TEXT_AREA_ID);
$input->setForm($element->getForm());
$input->setClass("widget-option input-textarea admin__control-text");
if ($element->getRequired()) {
$input->addClass('required-entry');
}
$element->setData('after_element_html', $input->getElementHtml() . $this->addAfterHtmlJs() . $this->getAfterElementHtmlCss());
return $element;
}
public function addAfterHtmlJs()
{
$scriptString = <<<HTML
require([
'jquery',
'mage/adminhtml/wysiwyg/tiny_mce/setup'
], 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",
}
});
wysiwygcompany_description.setup("exact");
});
HTML;
return $this->secureRenderer->renderTag('script', [], $scriptString, false);
}
/**
* @return string
*/
protected function getAfterElementHtmlCss() {
$html = <<<HTML
<style>
.admin__field-control.control .control-value {
display: none !important;
}
</style>
HTML;
return $html;
}
public function getHtmlId()
{
return self::TEXT_AREA_ID;
}
}
