初始化 tinymce 的多个实例

Question

我不知道如何在我的页面上初始化 tinymce 的两个实例。

我试过 this question 的答案，但没有成功。如果在开始初始化第二个 (co) 之前需要一些时间来完成第一个 (io) 的初始化，我是否需要使用超时？

var io = {
   selector:"#auth_info_intro textarea",
   ...,
   setup:function(ed){
      ed.on("init",function(e){
         tinyMCE.activeEditor.setContent(obj.INFO.INTRO.TEXT);
      });        
   }
};
var co = {
   selector:"#auth_info_conclude textarea",
   ...,
   setup:function(ed){
      ed.on("init",function(e){
         tinyMCE.activeEditor.setContent(obj.INFO.CONCLUDE.TEXT);
      });         
   }
};
tinymce.init(io);
tinymce.init(co);

以上抛出 Uncaught TypeError: Cannot read property 'body' of undefined。我错过了什么？

Answer 1

可能是因为它指向丢失的对象。尝试将您的选择器 #auth_info_intro textarea 更改为 textarea#auth_info_intro 和 #auth_info_conclude textarea，更改为 textarea#auth_info_conclude

Answer 2

（声望不足，无法向 Albert Israel 添加评论）。代码在修复选择器后工作。这里有一个jsFiddle.

<textarea id="auth_info_intro"></textarea>
<textarea id="auth_info_conclude"></textarea>

<script>
var obj = {
    INFO: {
    INTRO: {
        TEXT: "Hello World!"
    },
    CONCLUDE: {
        TEXT: "Goodbye World!"
    }
  }
};
var io = {
   selector:"textarea#auth_info_intro",
   setup:function(ed){
      ed.on("init",function(e){
         tinyMCE.activeEditor.setContent(obj.INFO.INTRO.TEXT);
      });        
   }
};
var co = {
   selector:"textarea#auth_info_conclude",
   setup:function(ed){
      ed.on("init",function(e){
         tinyMCE.activeEditor.setContent(obj.INFO.CONCLUDE.TEXT);
      });         
   }
};
tinymce.init(io);
tinymce.init(co);
</script>

Answer 3

显然，初始化第一个实例需要一些时间，所以我在第一个实例的初始化对象的设置参数中设置了一个超时时间，而不是立即尝试初始化第二个实例。这有效：

 var io = {};
 io.selector = "textarea[name=intro]";
 io.setup = function(ed){
     ed.on("init",function(e){
          tinyMCE.activeEditor.setContent(obj.INFO.INTRO.TEXT);              
          setTimeout(function(){
                var co = {};
                co.selector = "textarea[name=conclude]";
                co.setup = function(ed){
                    ed.on("init",function(e){tinyMCE.activeEditor.setContent(obj.INFO.CONCLUDE.TEXT);});                        
                }
                tinymce.init(co);
          },1000);              
     });
tinymce.init(io);

初始化 tinymce 的多个实例

initializing multiple instances of tinymce

javascript

tinymce-4