Question

TinyMCE4文档目前令人沮丧。我有一个与Ruby on Rails兼容的插入图像插件，但它依赖于不推荐使用的tiny_mce_popup.js。没有关于如何更新插件以避免使用该文件的信息。

Answer 1

TinyMCE 4弃用了旧的file_browser_callback，转而支持新的file_picker_callback，它具有可以返回元数据的优势。

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

在文件浏览器中将文件返回到主页面时，单击超链接或图像时会调用mySubmit('/images/file_123.jpg')。

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

Answer 2

TinyMCE 3依赖tiny_mce_popup.js在父对话和对话之间交换变量。 TinyMCE 4取消了dialog.htm和tiny_mce_popup.js

如果您查看image plugin，请在editor.windowManager.open后面看到对话框仅通过JS创建。这消除了通过opener对父变量进行愚蠢访问的需要。如果可以，请坚持使用此模板方法。

我选择坚持使用dialog.htm，但是我从rails中提供了它，因此我不会与使用JS交换表单auth_token。如果您这样做，请记住插入内容应该来自插件，而不是来自对话。这是我的简单图片上传器：

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

你需要一个rails附件控制器，你需要通过url传递你的附件init params。如果我在gem中构建它，它将与tinymce-rails兼容，我将更新此答案。

更新：TinyMCE现在有关于从3.x迁移的页面：http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x

我应该如何使用tiny_mce_popup.js为版本4更新TinyMCE插件？

2 个答案: