Setting up numerous instances of TinyMCE for use

Question

Setting up numerous instances of TinyMCE for use

I am having trouble initializing two instances of tinymce on my webpage.

Even after following the guidance provided in this particular thread, I am unable to get it working. Could it be possible that I need to introduce a timeout between initializing the first instance (io) and then proceeding with the initialization process for the second instance (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);

Running the code above results in an error message:

Uncaught TypeError: Cannot read property 'body' of undefined

. What could possibly be the issue here?

javascript tinymce-4

Answer 1

Answer №1

One possible reason for the issue could be that it's referring to non-existent objects. Consider modifying your selector from #auth_info_intro textarea to textarea#auth_info_intro, and from #auth_info_conclude textarea to textarea#auth_info_conclude

Answer 2

One possible reason for the issue could be that it's referring to non-existent objects. Consider modifying your selector from #auth_info_intro textarea to textarea#auth_info_intro, and from #auth_info_conclude textarea to textarea#auth_info_conclude

Answer 3

Answer №2

(Unfortunately, my reputation is not high enough to leave a comment for Albert Israel). The code is now functioning correctly after adjusting the selectors. If you want to see it in action, you can check out this jsFiddle link.

<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 4

(Unfortunately, my reputation is not high enough to leave a comment for Albert Israel). The code is now functioning correctly after adjusting the selectors. If you want to see it in action, you can check out this jsFiddle link.

<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 5

Answer №3

It seems that the first instance needs some time to initialize, so I decided to add a timeout in the setup parameter of the initialization object for the first instance instead of immediately trying to initialize the second instance. This approach proved to be successful:

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

Answer 6

It seems that the first instance needs some time to initialize, so I decided to add a timeout in the setup parameter of the initialization object for the first instance instead of immediately trying to initialize the second instance. This approach proved to be successful:

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

Setting up numerous instances of TinyMCE for use

Answer №1

Answer №2

Answer №3

Similar questions

Create a CSV file through an MVC Web API HttpResponse and retrieve it using AngularJS for downloading

Is it possible to utilize the NavigationTimingAPI with asynchronous requests?

The JavaScript confirm function will provide a false return value

What is the best way to create a percentage glyphicon star icon that reflects a decimal average rating?

Vanilla JS Rock, Paper, Scissors Game - Fails to reset classes upon restarting

Node.js retrieves a single row from a JSON array with two dimensions

Guide on assigning a material to ColladaLoader or OBJLoader

Ensuring the legitimacy of Rails form submissions

What could be the reason for my function not being executed in this particular scenario with my calculator HTML code?

What is the best way to specify a type for an object without altering its underlying implicit type?

The Sluggishness of MongoDB Aggregation in Determining Distinct IDs within Retrieved Documents

Tips for fixing an error encountered when running a react native project for the first time

Looping through an array and appending distinct elements to a fresh array

Rails: Ensure that JSON form fields remain populated in case the form encounters a validation error

Customize specific styles for individual divs one at a time (without the use of jQuery)

Utilizing Express.js: A Guide to Fetching File Downloads with a POST Method

Tips for arranging elements in proper order following a rotation

Guide on how to fill a jQuery DataTable with data from an XMLHttpRequest response

Into the depths we delve, extending beyond to an array of objects?

Filtering DataGrid columns with an external button in Material-UI: A step-by-step guide