How to setContent in wysiwyg editor using JQuery in magento2?

Question

I have one WYSIWYG editor in admin custom form which was created using the UI component.

I want to set content 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;
 }
 });
 });

Answer 1

Try below code

tinyMCE.get('your_textarea_id').setContent("test");

• Rutvee Sojitra: Thanks a lot!!! working fine
• Waqar Ali: How i can do this if Data is in html and Multiline?
• Himanshu: not workikng for me error "Cannot read property 'setContent' of null"