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");

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.