How to add custom popup to tinymce editor and add fields content to editor

I have added code to open bootstrap modal in tinymce custom button. I tried and added code below which I have tried. I don't know why it came blank fields not adding the content.

How can this fixed?

<!DOCTYPE html>
<html lang="en">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
   src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5/tinymce.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
   integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
   integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script>
   tinymce.init({
      selector: '#editor',
      plugins: 'autolink image link lists code template',
      toolbar: 'undo redo | bold italic strikethrough forecolor backcolor | image link bullist numlist custom_button code',
      menubar: false,
      height: 'calc(100vh - 2rem)',
      setup: (editor) => {
         editor.ui.registry.addButton('custom_button', {
            icon: 'comment-add',
            tooltip: 'Insert Sharequote',
            onAction: function (api) {
               $('#exampleModal').modal('show');
            }
         });
      },
   });

   $(document).on('click', '.saveChanges', function () {
      var editor = tinymce.get('editor');
      editor.execCommand('mceInsertTemplate', false, `
                        <h1>${$('#heading').html()}</h1>
                        <p>${$('#content').html()}</p>
                  `);
   });

</script>
<textarea id="editor"></textarea>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
   aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
         </div>
         <div class="modal-body">
            <input type="text" class="form-control" id="heading" />
            <textarea id="content" class="form-control"></textarea>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-primary saveChanges">Save changes</button>
         </div>
      </div>
   </div>
</div>
</html>

Solution

Here you need to make changes with editor.setContent by using this function you will able to set the content to editor.

Also before appending to the editor you have to take old content and combine with new. For this we have used editor.getContent();.

JSfiddle

I have also changed tinymce -> https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.16/tinymce.min.js

Below code will work seamless with your as well.

tinymce.init({
  selector: "#editor",
  height:"500px",
  plugins: "autolink image link lists code template",
  toolbar:
    "undo redo | bold italic strikethrough forecolor backcolor | image link bullist numlist custom_button code",
  menubar: false,
  height: "calc(100vh - 2rem)",
  setup: (editor) => {
    editor.ui.registry.addButton("custom_button", {
      icon: "comment-add",
      tooltip: "Insert Sharequote",
      onAction: function (api) {
        $("#exampleModal").modal("show");
      },
    });
  },
});

$('.saveChanges').on("click", function () {
  var heading = $("#heading").val();
  var content = $("#content").val();

  if (heading && content) {
    var editor = tinymce.get("editor");
    var existingContent = editor.getContent();

    editor.setContent(
      existingContent + "<h1>" + heading + "</h1><p>" + content + "</p>"
    );
    $("#exampleModal").modal("hide");
    $("#heading").val("");
    $("#content").val("");
  } else {
    alert("Please enter both a heading and content.");
  }
});