Magento2: TinyMCE (WYSIWYG) is not showing up in form field in Adminhtml DynamicRows container when more than one instance of row is called

[pemacviper]

Summary (*)

Hi all,
I'm developing a module where I need in Adminhtml form in a dynamicRows UI component a WYSIWYG (TinyMCE) form field. I made it work so far...but...first some facts:

Preconditions (*)

Magento 2.3.x & 2.4-develop

Envelopment:
DEV

• OS: OSX
• LAMP: MAMP Pro V 4.2
• Magento2 V.2.1.9
• PHP: 7.0.20
• mySQL: 5.6.35
• Several WYSIWYG editors in Adminhtml Form - outside and inside of dynamic rows.

PROD

• Mittwald Managed Server MAX 10.0 (Debian)
• Magento2 V.2.1.9
• PHP: 7.0.15
• mySQL: 5.6.19
• Several WYSIWYG editors in Adminhtml Form - outside and inside of dynamic rows.

Steps to reproduce (*)

You can use this module(go to the System->Dynamic Rows->Click Add Row multiple times) --> app.tar.gz
or you can create your own module with form config like this:
...my form*.xml

   <dynamicRows name="content_container">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="componentType" xsi:type="string">dynamicRows</item>
                <item name="recordTemplate" xsi:type="string">record</item>
                <item name="addButtonLabel" xsi:type="string">Neuen Eintrag hinzufügen</item>
                <item name="deleteButtonLabel" xsi:type="string">Entfernen</item>
                <item name="deleteProperty" xsi:type="boolean">false</item>
                <item name="defaultRecord" xsi:type="boolean">false</item>
                <item name="disabled" xsi:type="boolean">false</item>
                <item name="dndConfig" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/dynamic-rows/dnd</item>
                    <item name="template" xsi:type="string">ui/dynamic-rows/cells/dnd</item>
                    <item name="enabled" xsi:type="boolean">true</item>
                </item>
                <item name="additionalClasses" xsi:type="array">
                    <item name="admin__field-wide" xsi:type="boolean">true</item>
                </item>
                <item name="sortOrder" xsi:type="number">370</item>
            </item>
        </argument>
        <container name="record">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="isTemplate" xsi:type="boolean">true</item>
                    <item name="is_collection" xsi:type="boolean">true</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/dynamic-rows/record</item>
                    <item name="componentType" xsi:type="string">container</item>
                    <item name="dataScope" xsi:type="string"/>
                    <item name="sortOrder" xsi:type="number">380</item>
                </item>
            </argument>

            <field name="content_type">
                <argument name="data" xsi:type="array">
                    <item name="options" xsi:type="object">Abcpremium\Blog\Model\Blog\Attribute\Source\ContentType</item>
                    <item name="config" xsi:type="array">
                        <item name="dataType" xsi:type="string">text</item>
                        <item name="label" translate="true" xsi:type="string">Typen:</item>
                        <item name="formElement" xsi:type="string">select</item>
                        <item name="default" xsi:type="string">0</item>
                        <item name="source" xsi:type="string">Blog</item>
                        <item name="sortOrder" xsi:type="number">390</item>
                        <item name="notice" xsi:type="string" translate="true">Typ (z.B. Text)</item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">false</item>
                        </item>
                        <item name="component" xsi:type="string">Abcpremium_Blog/js/form/element/select-conditional</item>
                        <item name="elementTmpl" xsi:type="string">Abcpremium_Blog/form/element/select-contenttype</item>
                    </item>
                </argument>
            </field>
            <field name="content_element">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="formElement" xsi:type="string">wysiwyg</item>
                        <item name="wysiwyg" xsi:type="boolean">true</item>
                        <item name="wysiwygConfigData" xsi:type="array">
                            <item name="hidden" xsi:type="boolean">false</item>
                            <item name="settings" xsi:type="array">
                                <item name="theme_advanced_buttons1" xsi:type="string">link,unlink,|,bullist,numlist</item>
                                <item name="theme_advanced_buttons2" xsi:type="boolean">false</item>
                                <item name="theme_advanced_buttons3" xsi:type="boolean">false</item>
                                <item name="theme_advanced_buttons4" xsi:type="boolean">false</item>
                                <item name="theme_advanced_statusbar_location" xsi:type="boolean">false</item>
                            </item>
                            <item name="files_browser_window_url" xsi:type="boolean">false</item>
                            <item name="height" xsi:type="string">100px</item>
                            <item name="toggle_button" xsi:type="boolean">false</item>
                            <item name="add_widgets" xsi:type="boolean">false</item>
                            <item name="add_variables" xsi:type="boolean">false</item>
                            <item name="add_images" xsi:type="boolean">false</item>
                        </item>
                        <item name="template" xsi:type="string">ui/form/field</item>
                        <item name="elementTmpl" xsi:type="string">ui/form/element/wysiwyg</item>
                        <!--<item name="additionalClasses" xsi:type="string">admin__field-wide</item>-->
                        <item name="scopeLabel" xsi:type="string">[STORE VIEW]</item>
                        <item name="dataScope" xsi:type="string">content_element</item>
                        <item name="sortOrder" xsi:type="number">400</item>
                        <item name="notice" xsi:type="string" translate="true">Inhalt (z.B. Lorem ipsum...)</item>
                        <item name="additionalClasses" xsi:type="string">content_element</item>
                        <!--<item name="additionalClasses" xsi:type="array">
                            <item name="admin__field-wide" xsi:type="boolean">true</item>
                        </item>-->
                    </item>
                </argument>
            </field>
            <field name="content_image">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataType" xsi:type="string">text</item>
                        <item name="source" xsi:type="string">Blog</item>
                        <!--<item name="label" xsi:type="string" translate="true">Featured Bild</item>-->
                        <item name="visible" xsi:type="boolean">true</item>
                        <item name="formElement" xsi:type="string">fileUploader</item>
                        <item name="template" xsi:type="string">Abcpremium_Blog/form/element/uploader</item>
                        <item name="previewTmpl" xsi:type="string">Abcpremium_Blog/form/image-preview</item>
                        <item name="required" xsi:type="boolean">false</item>
                        <item name="isMultipleFiles" xsi:type="boolean">false</item>
                        <item name="sortOrder" xsi:type="number">421</item>
                        <item name="dataScope" xsi:type="string">content_image</item>
                        <item name="uploaderConfig" xsi:type="array">
                            <item name="url" xsi:type="url" path="abcpremium_blog/file/upload"/>
                        </item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">false</item>
                        </item>
                        <item name="additionalClasses" xsi:type="string">abcpremium_blog_image_controls_box</item>
                    </item>
                </argument>
            </field>
            <actionDelete>
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="componentType" xsi:type="string">actionDelete</item>
                        <item name="dataType" xsi:type="string">text</item>
                        <item name="fit" xsi:type="boolean">true</item>
                        <item name="sortOrder" xsi:type="string">440</item>
                    </item>
                </argument>
            </actionDelete>
        </container>
    </dynamicRows>

Expected result (*)

My expectation is, that the WYSIWYG editor shows up in every new row. The first one is working. Every next row does not show the WYSIWYG editor. Other instances of the WYSIWYG editor outside of dynamic rows (2 more instances) are showing up without any problems.

Actual result (*)

The actual result is, that the WYSIWYG editor only shows up in first instance of dynamic row but not in second an n-th row. This is reproducible on DEV and PROD.
Content in WYSIWYG editor field is not stored. But in not WYSIWYG editor textarea, second and n-th, is stored correctly.

Console ore any other logs do not show any errors or failures.

Any hint how make this work would be highly appreciated!

Many, many thanks
Peter

[magento-engcom-team]

@pemacviper, thank you for your report.
We've created internal ticket(s) MAGETWO-81407 to track progress on the issue.

[tweetyx]

Hi,
do you find a solution for wysiwyg ?
Can i have your code for this module ?

Thanks

[pemacviper]

Hi,

Appologies for the late response!

Unfortunately, I could not solve the problem. I am still lokking for a way to make it work.

Concerning the code, I am not allowed to share the code by contract. This is an implementation for a customer where the whole IP is handed over to the client. Sorry about this!!

Best regards

Peter

Am 19. Juni 2018 um 15:55 schrieb tweetyx [e-mail]:

Hi,
do you find a solution for wysiwyg ?
Can i have your code for this module ?

Thanks

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[tweetyx]

Ok, i disable wysiwyg so for the moment.
(i found my problem for save dataprovider from dynamic rows)

The problem is that magento when he creates a wysiwyg field, he gives on each input the same ID (issue by the input name) :

So if someone find where the Id of wysiwyg textarea is creating and do a dynamic id, it will work...

[tiberiucontiu]

I've fix the issue with Wysiwyg in the following way:

1. Overwrite textarea.html template in your own module.
   You can do this by copying the file 'vendor/magento/module-ui/view/base/web/templates/form/element/textarea.html' to your own module: app/code/%Vendor%/%ModuleName%/view/adminhtml/web/template/form/element/textarea.html

2. Create a javascript file in your module that will apply Wysiwyg plugin to a given textarea element. The file could be placed here: app/code/%Vendor%/%ModuleName%/view/adminhtml/web/js/%filename%.js
   The content of the file:

define([
    'jquery',
    'mage/adminhtml/wysiwyg/tiny_mce/setup'
], function () {
    var applyTinyMce = {};
    applyTinyMce.apply = function(element)
    {
        var config, editor;
        config = {
            settings: {
                mode: 'textarea',
                theme_advanced_buttons1: "bold,italic,justifyleft,justifycenter,justifyright,|," +
                "fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,|,code",
                theme_advanced_buttons2: null,
                theme_advanced_buttons3: null,
                theme_advanced_buttons4: null,
                theme_advanced_statusbar_location: null
            }
        };
        editor = new tinyMceWysiwygSetup(element.id, config);
        editor.turnOn();
    }
    return applyTinyMce;
});

1. Edit your textarea.html file and add an afterRender attribute to the textarea. Require your js script and call the apply the TinyMce plugin on your textarea.

<textarea class="admin__control-textarea" data-bind="
    value: value,
    valueUpdate: valueUpdate,
    hasFocus: focused,
    attr: {
        name: inputName,
        cols: cols,
        rows: rows,
        'aria-describedby': noticeId,
        placeholder: placeholder,
        id: uid,
        disabled: disabled
    }"
   afterRender="function(target, viewModel) {
        requirejs(['%Vendor%_%ModuleName%/js/%filename%'], function(applyTinyMce) {
            applyTinyMce.apply(target);
        });
   }"
/>

1. Edit your dynamic row xml and change the template for the textarea.

<field name="changes">
                        <argument name="data" xsi:type="array">
                            <item name="config" xsi:type="array">
                                <item name="dataType" xsi:type="string">text</item>
                                <item name="formElement" xsi:type="string">textarea</item>
                                <item name="label" xsi:type="string">Changes</item>
                                <item name="template" xsi:type="string">ui/form/field</item>
                                <item name="elementTmpl" xsi:type="string">%Vendor%_%ModuleName%/form/element/textarea.html</item>
                                <item name="dataScope" xsi:type="string">changes</item>
                                <item name="required" xsi:type="boolean">true</item>
                                <item name="sortOrder" xsi:type="number">30</item>
                                <item name="validation" xsi:type="array">
                                    <item name="required-entry" xsi:type="boolean">true</item>
                                </item>
                            </item>
                        </argument>
                    </field>

The result is quite obvious: after rendering the textarea the js function will be called and the TinyMce editor will be displayed over textarea.

[bsacharski]

The js script mentioned by @tiberiucontiu https://github.com/magento/magento2/issues/11262#issuecomment-425350425 doesn't seem to work in Magento 2.3.

Here's what we've been using in our project (copied from js code that renders _short description_ text area on product edit page)

define([
    "jquery",
    "mage/translate",
    "mage/adminhtml/events",
    "mage/adminhtml/wysiwyg/tiny_mce/setup",
    "mage/adminhtml/wysiwyg/widget",
], function () {
    var applyTinyMce = {};
    applyTinyMce.apply = function (element) {
        var config = {
            height: "300px",
            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",
            },
        };

        var editor = new wysiwygSetup(element.id, config);
        editor.setup('exact');
    };
    return applyTinyMce;
});

[m2-assistant[bot]]

Hi @engcom-Charlie. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• [ ] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
  Details

  If the issue has a valid description, the label Issue: Format is valid will be added to the issue automatically. Please, edit issue description if needed, until label Issue: Format is valid appears.

• [ ] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue. If the report is valid, add Issue: Clear Description label to the issue by yourself.

• [ ] 3. Add Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [ ] 4. Verify that the issue is reproducible on 2.4-develop branch

  Details

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!

• [ ] 5. Add label Issue: Confirmed once verification is complete.

• [ ] 6. Make sure that automatic system confirms that report has been added to the backlog.

[magento-engcom-team]

:white_check_mark: Confirmed by @engcom-Charlie
Thank you for verifying the issue. Based on the provided information internal tickets MC-29930 were created

Issue Available: @engcom-Charlie, _You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself._

[magento-engcom-team]

:white_check_mark: Confirmed by @engcom-Charlie
Thank you for verifying the issue. Based on the provided information internal tickets MC-29930 were created

Issue Available: @engcom-Charlie, _You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself._