1

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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