TinyMCE: Retrieving information from popup

Question

I'm having trouble with the documentation on TinyMCE for plugin development. I simply want to display a popup to choose between internal links / external links then either choose another page on the site or let the user insert an external link.

To launch the window I'm using the following code :

tinymce.PluginManager.add( 'insumolinks', function( editor, url ) {
    // Add a button that opens a window
    editor.addButton( 'insumolinks', {
        text: 'Link',
        icon: false,
        onclick: function() {
            // Open window
            editor.windowManager.open( {
                title: 'Insert Link',
                url: '/admin/pages/add_link',
                onsubmit: function( e ) {
                    // Insert content when the window form is submitted
                    // editor.insertContent( '<a href="#">' + editor.selection.getContent() + '</a>' );
                    console.log( e.data );                    
                }
            });
        }
    });
});

The page that is being loaded inside the window is :

<div>
    <select name="link_type" class="link_type" style="margin-top: 20px;">
    <option value="none">No Link</option>
    <option value="other-page">Other Page</option>
    <option value="external-link">External Link</option>
</select>
</div>

<div>
    <select name="link" class="resource-link" style="display: none;">
    <?php foreach( $pages as $page ) : ?>
        <option value="<?= $page->id ?>" data-url="<?= $page->url ?>">
        <?= $page->title ?>
    </option>
    <?php endforeach; ?>
</select>
</div>

<div>
    <input type="text" name="link" class="resource-link" value="http://" style="display: none;">
</div>

<div>
<button type="submit" class="btn btn-primary">Add Link</button>
</div>

What code would I have to run to send the link values through to the onsubmit call?

In the docs they use the WindowManager to create the page but I can't find much information about how to create different elements.

Thanks in advance

Answer 1

Old question, but still relevant.

Here's how I did it. I'm using tinymce v4.

I am finding the popup/iframe in jQuery, but it could easily be done in vanilla JS.

I created my JS plugin, included it externally in my init section

tinymce.init({
    selector: "textarea.tinymce",
    external_plugins: { 'myplugin': 'url-to-my-plugin' }
});

Plugin:

tinymce.PluginManager.add('myplugin', function(editor, url) {
   // Adds a menu item to the tools menu
   editor.addMenuItem('myplugin', {
      id: 'myPluginId',
      text: 'My Plugin Menu Title',
      context: 'insert',
      onclick: function() {
         editor.windowManager.open({
            title: 'Title Of My Plugin',
            url: 'myplugin.html',
            //we create the submit buttons here instead of in our HTML page
            buttons: [{
                  text: 'Submit',
                  onclick: 'submit'
               }, {
                  text: 'Cancel',
                  onclick: 'close'
               }],
            width: 500,
            height: 325,
            onsubmit: function(e) {
               //find the popup, get the iframe contents and find the HTML form in the iFrame
               form = $('#myPluginId iframe').contents().find('form');

               //once you have the form, you can do whatever you like with the data from here
            }
         });
      }
   });
});