Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Create TinyMCE Dialogs?

Tags:

tinymce

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.

like image 271
DragonFlyEye Avatar asked Feb 10 '11 17:02

DragonFlyEye


1 Answers

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);
        }
});
like image 112
user2449231 Avatar answered Oct 27 '22 11:10

user2449231