Can't set value for wysiwyg field component in admin form

Question

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>
            </item>
        </argument>
        <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>
                    <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>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>

Vendor\Pdf\Ui\Component\Template\Form\Element\Wysiwyg

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(
            $context->getNamespace().'_'.$data['name'],
            'Vendor\Pdf\Block\Adminhtml\Helper\Editor',
            [
                '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

define([
    'jquery',
    'underscore',
    'mage/template',
    'tinymce',
    'Magento_Ui/js/modal/alert',
    'mage/translate',
], 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

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.

$form->setHtmlIdPrefix('something_');

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.