Last active
February 8, 2021 16:44
-
-
Save bipoza/703c99070f919086a6550248c37bd83e to your computer and use it in GitHub Desktop.
TinyMCE Custom button with Dialog openURL - Demo SOURCE: https://codesandbox.io/embed/tinymce-dialog-openurl-demo-fpfew
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment