1

I have one wysiwyg editor in admin custom form which created using ui component.

I want to setcontent using JQuery in magento2

Can anyone help me?

    define([
        'underscore',
        'uiRegistry',
        'Magento_Ui/js/form/element/select',
        'mage/url',
        'wysiwygAdapter'
    ], function (_, uiRegistry, select, url,tinyMCE) {
        'use strict';
        return select.extend({

            initialize: function (){
                var obj = this;
                var type= this._super().initialValue;
                this.makevisilibily(type);

                var defaultTemplate=uiRegistry.get('banner_form.areas.general.general.default_template');

                defaultTemplate.on('update',function(){
                   obj.displayTemplateImage(defaultTemplate.value());
                })

                jQuery('body').on('click',"#banner_load_template_btn",function(){
                    var toggleMCEEditor = jQuery('#togglebanner_form_content');
                    var defaultTemplate=uiRegistry.get('banner_form.areas.general.general.default_template');
                    var templateContent=obj.displayTemplateContent(defaultTemplate.value());

                       toggleMCEEditor.trigger('click');

                      tinyMCE.get('textarea#banner_form_content').setContent(templateContent);
                })
                return this;

            },

            /**
             * On value change handler.
             *
             * @param {String} value
             */
            onUpdate: function (value) {
                this.makevisilibily(value);
                var defaultTemplate=uiRegistry.get('banner_form.areas.general.general.default_template');

                  this.displayTemplateImage(defaultTemplate.value());
                return this._super();
            },

            makevisilibily: function (value) {

                var field1 = uiRegistry.get('banner_form.areas.general.general.default_template');
                var field2 = uiRegistry.get('banner_form.areas.general.general.default_image');
                var field3 = jQuery('body').find('.bannerwysiwygClass');
                var field4 = jQuery('body').find(".bannerimageClass");

                if (value == 1) {
                    field1.visible(true);
                    field2.visible(true);
                    field3.show();
                    field4.hide();
                } else {
                    field1.visible(false);
                    field2.visible(false);
                    field3.hide();
                    field4.show();
                }

                return this._super();
            },
              displayTemplateImage: function (defaultTemplate) { 
                var data = this.getContentAndImage(defaultTemplate);
                jQuery("#mp-demo-image").attr("src",data['imgSrc']);

                },

                displayTemplateContent: function (defaultTemplate) { 
                var data = this.getContentAndImage(defaultTemplate);
                return data['templateContent'];

                },


                getContentAndImage:function (defaultTemplate) {
                    var imgSrc="";
                    var templateContent="";
                    var data =[];
                    if(defaultTemplate=="demo1.png")
                    {
                        imgSrc=window.defaultTemplate1;
                        templateContent=window.defaultContent1;
                    }
                    else if(defaultTemplate=="demo2.png")
                    {
                      imgSrc=window.defaultTemplate2;
                      templateContent=window.defaultContent2;
                    }
                    else if(defaultTemplate=="demo3.png")
                    {
                      imgSrc=window.defaultTemplate3;
                      templateContent=window.defaultContent3;
                    }
                    else if(defaultTemplate=="demo4.jpg")
                    {
                      imgSrc=window.defaultTemplate4;
                      templateContent=window.defaultContent4;
                    }
                    else if(defaultTemplate=="demo5.jpg")
                    {
                      imgSrc=window.defaultTemplate5;
                      templateContent=window.defaultContent5;
                    }
                    data['imgSrc'] = imgSrc;
                    data['templateContent'] = templateContent;
                    return data;
                }
            });
    });
4

Try below code

tinyMCE.get('your_textarea_id').setContent("test");
3
  • 1
    Thanks a lot!!! working fine – Rutvee Sojitra Jun 19 '19 at 5:56
  • How i can do this if Data is in html and Multiline? – Real Magento Man Feb 18 '20 at 6:35
  • not workikng for me error "Cannot read property 'setContent' of null" – Himanshu Feb 7 at 8:17

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.