initializing multiple instances of tinymce

Question

I can't figure out how to initialize two instances of tinymce on my page.

I've tried the answer from this question but no luck. Do I need to use a timeout if it takes some time to finish initializing the first one (io) before starting to initialize the second one (co)?

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

The above throws Uncaught TypeError: Cannot read property 'body' of undefined. What am I missing?

Albert Israel · Answer 1 · 2016-07-28T01:36:53.807

1

It could be because it is pointing to missing objects. Try to change your selector #auth_info_intro textarea to textarea#auth_info_intro and #auth_info_conclude textarea, to textarea#auth_info_conclude

edited Jul 28 '16 at 01:36

answered Jul 28 '16 at 01:14

Albert Israel

585
3
8

score 0 · Answer 2 · answered Jul 28 '16 at 01:30

(Not enough reputation to add a comment to Albert Israel). The code works after fixing the selectors. Here is a 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>

itsmikem · Accepted Answer · 2016-08-09T20:06:06.200

Apparently, it takes some amount of time to initialize the first instance, so I set a timeout within the setup parameter of the initialization object of the first instance, instead of just immediately attempting to initialize the second instance. This worked:

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

initializing multiple instances of tinymce

3 Answers3