bipoza/iframe.html

## iframe.html
<p>Name: </p><input id="name" type="text"/>

<p>Select a Thing:</p>

<select name="thingselect" id="thingselect">
  <option value="thing1">Thing 1</option>
  <option value="thing2">Thing 2</option>
  <option value="thing3">Thing 3</option>
</select>
<br>
<br>

<button id="insert-content">Insert This Content! (Dialog will stay open)</button>
<script>
  window.addEventListener('message', function (event) {
    console.log(event.data)
    if (event.data.mceAction ==='customInsertAndClose'){
      var value = {
        name: document.getElementById('name').value,
        thing: document.getElementById('thingselect').value
      };

      window.parent.postMessage({
        mceAction: 'execCommand',
        cmd: 'iframeCommand',
        value
      }, origin);

      window.parent.postMessage({
            mceAction: 'close'
        }, origin);
    }
  });

  document.getElementById('insert-content').addEventListener('click', function (event) {
    var value = {
      name: document.getElementById('name').value,
      thing: document.getElementById('thingselect').value
    };

    window.parent.postMessage({
      mceAction: 'execCommand',
      cmd: 'iframeCommand',
      value
    }, origin);
  });

</script>

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <script src="https://cdn.tiny.cloud/1/olayhq3egaat8n1xm0zjleclyytx387nwra71on76g6y45qp/tinymce/5/tinymce.min.js"></script>
    <script type="text/javascript">
      var dialogConfig = {
        title: "Dialog Demo",
        url: "iframe.html",
        buttons: [
          {
            type: "custom",
            name: "insert-and-close",
            text: "Insert and Close",
            primary: true,
            align: "end"
          },
          {
            type: "cancel",
            name: "cancel",
            text: "Close Dialog"
          }
        ],
        width: 600,
        height: 300,
        onAction: function(instance, trigger) {
          instance.sendMessage({
            mceAction: "customInsertAndClose"
          });
        }
      };

      tinymce.init({
        selector: "textarea",
        plugins: [
          "advlist autolink lists link image imagetools charmap print preview anchor",
          "searchreplace visualblocks code fullscreen",
          "insertdatetime media table paste"
        ],
        height: 400,
        toolbar: "iframe",
        setup: function(editor) {
          editor.ui.registry.addButton("iframe", {
            text: "Open Dialog",
            icon: "frame",
            onAction: () => {
              _api = editor.windowManager.openUrl(dialogConfig);
            }
          });

          editor.addCommand("iframeCommand", function(ui, value) {
            editor.insertContent(
              `<p>Your name is ${value.name}, and you have selected ${
                value.thing
              }!</p>`
            );
          });
        }
      });
    </script>

    <h1>Tiny Dialog Demo</h1>

    <form method="post" action="dump.php">
      <textarea name="content"></textarea>
    </form>
  </body>
</html>
	<p>Name: </p><input id="name" type="text"/>

	<p>Select a Thing:</p>

	<select name="thingselect" id="thingselect">
	<option value="thing1">Thing 1</option>
	<option value="thing2">Thing 2</option>
	<option value="thing3">Thing 3</option>
	</select>
	<br>
	<br>

	<button id="insert-content">Insert This Content! (Dialog will stay open)</button>
	<script>
	window.addEventListener('message', function (event) {
	console.log(event.data)
	if (event.data.mceAction ==='customInsertAndClose'){
	var value = {
	name: document.getElementById('name').value,
	thing: document.getElementById('thingselect').value
	};

	window.parent.postMessage({
	mceAction: 'execCommand',
	cmd: 'iframeCommand',
	value
	}, origin);

	window.parent.postMessage({
	mceAction: 'close'
	}, origin);
	}
	});

	document.getElementById('insert-content').addEventListener('click', function (event) {
	var value = {
	name: document.getElementById('name').value,
	thing: document.getElementById('thingselect').value
	};

	window.parent.postMessage({
	mceAction: 'execCommand',
	cmd: 'iframeCommand',
	value
	}, origin);
	});

	</script>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Static Template</title>
	</head>
	<body>
	<script src="https://cdn.tiny.cloud/1/olayhq3egaat8n1xm0zjleclyytx387nwra71on76g6y45qp/tinymce/5/tinymce.min.js"></script>
	<script type="text/javascript">
	var dialogConfig = {
	title: "Dialog Demo",
	url: "iframe.html",
	buttons: [
	{
	type: "custom",
	name: "insert-and-close",
	text: "Insert and Close",
	primary: true,
	align: "end"
	},
	{
	type: "cancel",
	name: "cancel",
	text: "Close Dialog"
	}
	],
	width: 600,
	height: 300,
	onAction: function(instance, trigger) {
	instance.sendMessage({
	mceAction: "customInsertAndClose"
	});
	}
	};

	tinymce.init({
	selector: "textarea",
	plugins: [
	"advlist autolink lists link image imagetools charmap print preview anchor",
	"searchreplace visualblocks code fullscreen",
	"insertdatetime media table paste"
	],
	height: 400,
	toolbar: "iframe",
	setup: function(editor) {
	editor.ui.registry.addButton("iframe", {
	text: "Open Dialog",
	icon: "frame",
	onAction: () => {
	_api = editor.windowManager.openUrl(dialogConfig);
	}
	});

	editor.addCommand("iframeCommand", function(ui, value) {
	editor.insertContent(
	`<p>Your name is ${value.name}, and you have selected ${
	value.thing
	}!</p>`
	);
	});
	}
	});
	</script>

	<h1>Tiny Dialog Demo</h1>

	<form method="post" action="dump.php">
	<textarea name="content"></textarea>
	</form>
	</body>
	</html>