magento / magento2

Prior to making any Submission(s), you must sign an Adobe Contributor License Agreement, available here at: https://opensource.adobe.com/cla.html. All Submissions you make to Adobe Inc. and its affiliates, assigns and subsidiaries (collectively “Adobe”) are subject to the terms of the Adobe Contributor License Agreement.
http://www.magento.com
Open Software License 3.0
11.43k stars 9.29k forks source link

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

Open pemacviper opened 6 years ago

pemacviper commented 6 years ago

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

PROD

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.

bildschirmfoto 2017-10-06 um 00 03 22

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 commented 6 years ago

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

tweetyx commented 6 years ago

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

Thanks

pemacviper commented 6 years ago

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 notifications@github.com:

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 commented 6 years ago

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 commented 5 years ago

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;
    });
  3. 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);
        });
    }"
    />
  4. 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 commented 5 years ago

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] commented 4 years ago

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:

magento-engcom-team commented 4 years ago

: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 commented 3 years ago

: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.

github-jira-sync-bot commented 2 years ago

:x: Cannot export the issue. This GitHub issue is already linked to Jira issue(s): https://jira.corp.magento.com/browse/AC-805

MagestyApps commented 2 years ago

For those who is still experiencing the same issue - you just need to add 'dynamic_id' = true to the wysiwyg config. Here is how it will look in the code:

<item name="wysiwygConfigData" xsi:type="array">
    <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 name="dynamic_id" xsi:type="boolean">true</item>
</item>
miguelangeloalmeida commented 2 years ago

<item name="dynamic_id" xsi:type="boolean">true</item> @MagestyApps Thank you! This solution worked.

thomas-kl1 commented 1 month ago

For those who is still experiencing the same issue - you just need to add 'dynamic_id' = true to the wysiwyg config. Here is how it will look in the code:

<item name="wysiwygConfigData" xsi:type="array">
    <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 name="dynamic_id" xsi:type="boolean">true</item>
</item>

@magento-engcom-team This issue can be closed. Property "dynamic_id" must be used for this use case.