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