tinyMCEエディターにHTMLコードを挿入するにはどうすればよいですか？

setContent（）およびgetContent（）関数を試してください。

たとえば、1つのボタンと1つのテキストエリアを使用します。

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

そして、このJS / Jqueryコード：

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

編集部分

わかりました。常に同じフッターと同じヘッダーがあります。追加されたすべてのカスタムパーツを追跡するための配列を作成できます。

var myComponents = [];

そして、3つの新しいボタン（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();
        });

エディションを更新するための新しい関数を作成しました。

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

エディションが終了したら、tinymce.activeEditor.save（）を呼び出して、テキストをhtmlドキュメントに保存します。たとえば、フォームを使用している場合は、Submitイベントでsave（）を呼び出します。

TinyMCE.cloudからのその他の例：

• https://www.tiny.cloud/docs/demo/inline/
• https://www.tiny.cloud/blog/email-marketing-software/