开发者

How to Create TinyMCE Dialogs?

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.


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);
        }
});


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜