How to Create TinyMCE Dialogs?

Question

Ok, the answer to this question really aught to be a whole lot easier if I could just find the relevant information within TinyMCE's documentation, but I cannot. What I want to do is the following:

1. User either selects text within the TinyMCE editor or not
2. User clicks the button
3. Dialog opens with the selected text in one of three fields (I want to be able to create a bit.ly link from a full URL in the editor)
4. User clicks OK, magic happens, and they get sent back to the editor with the newly-changed content.

So basically, all I really need is to know how to make the popup work, at least for now. Trouble is: searching by "tinymce popup," "tinymce dialog" "tinymce prompt user" all come up with nothing useful that I can see.

Answer 1

The tutorials for how to create a dialog/prompt in TinyMCE have moved and some of the examples of how to do this since vanished. There is a new tutorial that covers creating plugins and dialogs for TinyMCE 4.

The relevant part is:

// Open window
editor.windowManager.open({
    title: 'Example plugin',
        body: [
            {type: 'textbox', name: 'title', label: 'Title'}
        ],
        onsubmit: function(e) {
            // Insert content when the window form is submitted
            editor.insertContent('Title: ' + e.data.title);
        }
});

Answer 2

The cleanest way to do something like this is with a TinyMCE plugin.

On the TinyMCE site there is an tutorial to creating a plugin. This uses the example plugin that is part of the TinyMCE download package.

The good news is that the example plugin takes the selected text, and displays it within a dialog. This should give you a basic framework to build upon.