Here is my field component config

<fieldset name="order_template">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="collapsible" xsi:type="boolean">false</item>
                <item name="label" xsi:type="string" translate="true">Order Template</item>
                <item name="sortOrder" xsi:type="string">30</item>
        <field name="order_template">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="class" xsi:type="string">Vendor\Pdf\Ui\Component\Template\Form\Element\Wysiwyg</item>
                    <item name="formElement" xsi:type="string">wysiwyg</item>
                    <item name="wysiwygConfigData" xsi:type="array">
                        <item name="widget_window_url" xsi:type="string">pdf/widget/index</item>
                    <item name="template" xsi:type="string">ui/form/field</item>
                    <item name="source" xsi:type="string">key</item>
                    <item name="wysiwyg" xsi:type="boolean">true</item>
                    <item name="dataScope" xsi:type="string">order_template</item>
                    <item name="additionalClasses" xsi:type="string">admin__field-wide</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>


class Wysiwyg extends \Magento\Ui\Component\Form\Element\AbstractElement
    const NAME = 'wysiwyg';

     * @var Form
    protected $form;

     * @var Editor
    protected $editor;

     * @param ContextInterface $context
     * @param FormFactory      $formFactory
     * @param ConfigInterface  $wysiwygConfig
     * @param array            $components
     * @param array            $data
     * @param array            $config
    public function __construct(
        ContextInterface $context,
        FormFactory $formFactory,
        ConfigInterface $wysiwygConfig,
        array $components = [],
        array $data = [],
        array $config = []
    ) {
        $wysiwygConfigData = isset($config['wysiwygConfigData']) ? $config['wysiwygConfigData'] : [];

        $this->form = $formFactory->create();
        $this->editor = $this->form->addField(
                'force_load' => true,
                'rows' => 20,
                'name' => $data['name'],
                'config' => $wysiwygConfig->getConfig($wysiwygConfigData),
                'wysiwyg' => isset($config['wysiwyg']) ? $config['wysiwyg'] : null,
        $data['config']['content'] = $this->editor->getElementHtml();

        parent::__construct($context, $components, $data);

     * Get component name.
     * @return string
    public function getComponentName()
        return static::NAME;

I have some code js for setValue by javascript for this field. But somehow this field undefined. Field show but value empty

], function ($, _, mageTemplate, tinyMCE, alert) {
    'use strict';

    init: function() {
      $(btn).on('click', this, this._updateFieldValue);

    _updateFieldValue: function() {
      // My code
      (tinyMCE.get(field_id_textarea) === undefined) ? $(field_id_textarea).val('test value') : tinyMCE.get(field_id_textarea).setContent('');


console.log(tinyMCE.getInstanceById(field_id_textarea)); <== this value undefined

console.log(tinyMCE.get("field_id_textarea").getContent()); <== undefined

My question:
Above my way is a right way to set-value for wysiwyg field with form component approachs ? or i am missing something. How to fix missing value or undefined
I get this problem in magento 2.1.6 and 2.1.5 but in 2.1.7 work

1 Answer 1


This happens because you name your field content. Then the tinymce js looks for the element with id content to apply the editor. But there is already a content element in the page and it's a div.

Adding a prefix to the form elements solves this issue because the element does not have the id content anymore. It has something_content. You can add this prefix to one line of code.


Doing this, you don't need to alter the form data you pass to $form->addValues to add your prefix. It will all be done automatically.

The id prefix can be different for each tab if you have multiple tabs.

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.