CODEWITHSUNDEEP
jquerytinymcetinymce-4
daulat
daulat

Reputation: 949

tinymce on jQuery change event change content on each textarea

I have multiple textareas
Now tinymce plugin is working on each textarea
I'm using version 4.4.3 (2016-09-01) 

<textarea id="main_info" class="description" ></textarea>

<textarea id="key_features" class="description" ></textarea>

<textarea id="about_the_course" class="description" ></textarea>    

<select id="page">            
<option value="1">Page 1</option>
<option value="2">Page 2</option>
<option value="3">Page 3</option>
</select>

I have select box on change event i'm getting data from database based on the selected option
Now suppose i'm getting 3 value 

$('#page').on('change',function(){
    // I'm getting this value from ajax request
      var value1='<b>hello1</b>';
      var value2='<b>hello2</b>';
      var value3='<b>hello3</b>';
   // Now I want to put this value in each tinymce textarea like this
     $('#main_info').html(value1);
     $('#key_features').html(value2);
     $('#about_the_course').html(value3);
   // But it's not working
});

What should i do here please help??

Plugin code for multiple textareas 

  tinymce.init({
  selector: '.description',
  height: 500,
  theme: 'modern',
  plugins: [
    'advlist autolink lists link image charmap print preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars code fullscreen',
    'insertdatetime media nonbreaking save table contextmenu directionality',
    'emoticons template paste textcolor colorpicker textpattern imagetools codesample'
  ],
  relative_urls : false,
  remove_script_host : false,
  convert_urls : true,
  extended_valid_elements: 'span[class]',
  toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',
  image_advtab: true,
  templates: [
    { title: 'Test template 1', content: 'Test 1' },
    { title: 'Test template 2', content: 'Test 2' }
  ],
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tinymce.com/css/codepen.min.css'
  ],
  setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    }
 });
</script>

Upvotes: 0

Views: 3147

Answers (2)

Michael Fromin
Michael Fromin

Reputation: 13726

If you want to load new data into TinyMCE after it has been initialized you need to use TinyMCE APIs to do that:

https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#setcontent

For example:

tinymce.get('about_the_course').setContent('<span>Hardcoded content</span>');

or 

var value1='<b>hello1</b>';
tinymce.get('about_the_course').setContent(value1);

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : instead of .html() use .val() as shown below

$('#main_info').val(value1);
$('#key_features').val(value2);
$('#about_the_course').val(value3);

Upvotes: 1

Related Questions