How can I inject html code into tinyMCE editor?

In a js file, I have a list of html components that I store in variables. On the front end, I have multiple buttons with "component" class and specific IDs.

Then I try to do a switch function so each ".component" ID correspond to a specific html block. Each time I click on a button, the html code should be stored/added in a variable "code".

And the final goal is to create a function so when I click on a button, the corresponding html is injected in tinyCME editor.

Is this possible ?

Here is a simplified version of my code.

function build_email(all_components) {
    

var brand_centered='\n'
    +'<tr>\n'
    +'  <td align="center" style="font-size:0; padding: 10px 0; background-color:#EDEEF6;" valign="top">\n'
    +'     <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">\n'
    +'        <tr>\n'
    +'           <td style="padding:10px 0;text-align: center"><img alt="" border="0" width="60" height="50" src="myimage.png" style="width:60px;height:50px"></td>\n'
    +'        </tr>\n'
    +'     </table>\n'
    +'  </td>\n'
    +'</tr>\n'
    etc...


var total_components = component_list.length;
for (var i = 0; i <= total_components - 1; i++) {
    switch (component_list[i]) {
        case "add-brand-centered" :
        code += brand_centered;
        break;
        case "add-brand-left" :
        code += brand_left;
        break;
        etc...
    }   
}

$('.component').each(function(){

    tinymce.activeEditor.setContent(code);
})

Solution

Try setContent() and getContent() functions.

For instance, I use one button and a textarea.

<button type="button" id="add">Add components</button>
<textarea></textarea>

And then this JS/Jquery code:

tinymce.init({
  selector: 'textarea',
  setup: function(editor) {
    editor.on('init', function(e) {
      tinymce.activeEditor.setContent("<b>Hello world</b>");
    });
  }
});


var header = '<div class="display-1">Header</div>';
var body = '<div class="container">body</div>';
var footer = '<div class="footer">footer</div>';
var myComponents = [header,footer,footer];

document.getElementById('add').addEventListener('click', function(){
  let oldContent = tinymce.activeEditor.getContent();
  for(let i = 0; i < myComponents.length; i++){
    oldContent += myComponents[i];
  }
  tinymce.activeEditor.setContent(oldContent);
});

Edited part

Ok, we always have the same footer and the same header. We can have an array to track all added custom parts.

var myComponents = [];

And we have 3 new buttons (add-1, add-2, add-3):

var custom1 = "<p>Hello</p>";
var custom2 = "<span>Hello world</span>";
var custom3 = "<b>Strong</b>";

document.getElementById('add-1').addEventListener('click', function(){
      myComponents.push(custom1);
      updateEdition();
    });
document.getElementById('add-2').addEventListener('click', function(){
          myComponents.push(custom2);
          updateEdition();
        });
document.getElementById('add-3').addEventListener('click', function(){
          myComponents.push(custom3);
          updateEdition();
        });

We have created a new function for updating the edition:

function updateEdition(){
          let edition = header;
          for(let i = 0; i < myComponents.length; i++){
            edition += myComponents[i];
          }
          edition += footer;
          tinymce.activeEditor.setContent(edition);
}

When you finish the edition, call tinymce.activeEditor.save() to save your text in your html document. For example, call save() on Submit event if you are using a form.

More examples from TinyMCE.cloud: