Question

我有多个textareas
现在，tinymce插件正在每个textarea上工作我使用的是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>

我在更改事件上选择了框，我根据所选选项从数据库中获取数据现在假设我得到3个值

$('#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
});

我该怎么办请帮忙？

多个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>

Answer 1

试试这个：而不是.html()使用.val()，如下所示

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

Answer 2

如果您想在初始化后将新数据加载到TinyMCE中，您需要使用TinyMCE API来执行此操作：

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

例如：

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

或

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

jQuery上的tinymce更改事件更改每个textarea上的内容

2 个答案: