How should I update a TinyMCE plugin using tiny_mce_popup.js for version 4?

Question

TinyMCE4 documentation is currently dismal. I have an insert image plugin compatible with Ruby on Rails but it relies on the deprecated tiny_mce_popup.js. There's no information for how I should update a plugin to circumvent use of that file.

Answer 1

TinyMCE 4 deprecates the old file_browser_callback in favor of the new file_picker_callback which has the advantage that it can return metadata.

tinymce.init({
    selector: 'textarea.tinymce',
    file_picker_callback: function (callback, value, meta) {
        myFilePicker(callback, value, meta);
    },
    plugins: ['link image'],
    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
});

function myFilePicker(callback, value, meta) {
    tinymce.activeEditor.windowManager.open({
        title: 'File Manager',
        url: '/Site/FileManager?type=' + meta.filetype,
        width: 650,
        height: 550,
    }, {
        oninsert: function (url) {
            callback(url);
        }
    });
}

In your file browser to return the file to the main page you call mySubmit('/images/file_123.jpg') when you click on a hyperlink or a image.

function mySubmit(url) {
    top.tinymce.activeEditor.windowManager.getParams().oninsert(url);
    top.tinymce.activeEditor.windowManager.close();
}

Answer 2

TinyMCE 3 was reliant on tiny_mce_popup.js for exchanging variables between the parent and dialogue. TinyMCE 4 does away with dialog.htm and with tiny_mce_popup.js

If you have a look at the image plugin, following editor.windowManager.open you can see the dialogue is created through JS alone. This eliminates the need for goofy access to parent variables through opener. If you can, stick with this template method.

I chose to stick with dialog.htm but I served it from rails so I wouldn't have deal with exchanging the form auth_token with JS. If you do this, remember that inserting your content should come from the plugin and not from your dialogue. This is my simple image uploader :

tinymce.PluginManager.add('railsupload', function(editor, url) {
  var win, data, dom = editor.dom

  // Add a button that opens a window
  editor.addButton('railsupload', {
    icon: 'image',
    tooltip: 'Insert image',
    onclick: showDialog
  });

  function showDialog() {
    win = editor.windowManager.open({
      title: 'Insert image',
      name: 'railsupload',
      url: '/attachments/tinymce?owner_type=' + editor.settings.owner_type + '&owner_id=' + editor.settings.owner_id,
      width: 200,
      height: 220,
      bodyType: 'tabpanel',
      buttons: [{
        text: 'Insert',
        onclick: submitForm
      }]
    });
  }

  function submitForm() {
    editor.insertContent("<img src=\"" + self.frames[1].document.img_url + "\" />")
    win.close()
  }
});

You'll need a rails attachments controller and you'll need to pass your attachment init params through the url. If I build this out in a gem, it will be compatible with tinymce-rails and I'll update this answer.

Update: TinyMCE now has this page on migrating from 3.x: http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x