我應該如何使用tiny_mce_popup.js更新版本4來更新TinyMCE插件？

Question

TinyMCE4文檔目前很糟糕。我有一個與Ruby on Rails兼容的插件圖像插件，但它依賴於棄用的tiny_mce_popup.js。沒有關於如何更新插件來規避該文件的使用的信息。

Answer 1

TinyMCE 3依賴tiny_mce_popup.js來交換父對象和對話之間的變量。 TinyMCE 4不再使用dialog.htm和tiny_mce_popup.js

如果你看看image plugin，接着editor.windowManager.open你可以看到對話是通過JS創建的。這消除了通過opener高速訪問父變量的需要。如果可以的話，堅持使用這種模板方法。

我選擇堅持使用dialog.htm，但我從軌道服務，所以我不會處理與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() 
    } 
}); 

你需要一個軌附件控制器，你就需要通過URL來傳遞您的附件初始化參數。如果我在寶石中構建它，它將與tinymce-rails兼容，我將更新此答案。

更新：現在TinyMCE有從3.X遷移此頁：http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x

Answer 2

TinyMCE的4贊成新file_picker_callback其優點在於它可以返回元數據的棄用老file_browser_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(); 
}