4

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

4

2 回答 2

12

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();
}
于 2014-07-04T10:06:01.437 回答
4

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

如果你看一下图像插件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 传递您的附件初始化参数。如果我在 gem 中构建它,它将与tinymce-rails兼容,我会更新这个答案。

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

于 2013-06-10T21:39:04.873 回答