Tinymce 4.x 的 Ajaxfilemanager

Question

我试图让 ajaxfilemanager v1.1 与 Tinymce 4.x 一起工作。它在 Tinymce 3.x 上运行良好，但有一些 API 更改破坏了它。在花了一些时间之后，我让它再次工作 - 看看我的答案......

Answer 1

...，所以如果你有兴趣，你也可以让它工作。您只需要创建一个 tinymce4 初始化脚本（强制）并复制 tinymce 配置和 CSS（可选）。

第一步 - 在 jscripts/ 中创建新的 javascript

转到 ajaxfilemanager/jscripts 文件夹，将 for_tinymce.js 复制到 for_tinymce4.js，然后修补（或修改）它。 p>

这是完整的补丁，你可以使用它

--- for_tinymce.js  2010-02-05 15:14:48.000000000 +0100
+++ for_tinymce4.js 2013-10-08 11:44:44.000000000 +0200
@@ -1,5 +1,5 @@
 // Some global instances
-var tinymce = null, tinyMCEPopup, tinyMCE;
+var tinymce = null, tinyMCEPopup;

 tinyMCEPopup = {
    init : function() {
@@ -7,12 +7,11 @@

        // Find API
        tinymce = w.tinymce;
-       tinyMCE = w.tinyMCE;
        t.editor = tinymce.EditorManager.activeEditor;
-       t.params = t.editor.windowManager.params;
+       t.params = t.editor.windowManager.getParams();

-       // Setup local DOM
-       t.dom = t.editor.windowManager.createInstance('tinymce.dom.DOMUtils', document);
+       // Setup local DOM (because of IE)
+       t.dom = new tinymce.dom.DOMUtils(document);
        t.dom.loadCSS(t.editor.settings.popup_css);

        // Setup on init listeners
@@ -25,7 +24,6 @@

        t.isWindow = !t.getWindowArg('mce_inline');
        t.id = t.getWindowArg('mce_window_id');
-       t.editor.windowManager.onOpen.dispatch(t.editor.windowManager, window);
    },

    getWin : function() {

如果补丁对您不起作用，您可以按照我所做的步骤手动进行更改：

1. 在您喜欢的编辑器（vim、nano、joe、gedit...）中打开 for_tinymce4.js

2. 在第 2 行删除 tinyMCE 声明（没用），但保留 tinymce 和 tinyMCEPopup

   var tinymce = null, tinyMCEPopup;
   

3. 删除第 10 行，其中 tinyMCE 被分配了 w.tinyMCE；

   tinyMCE = w.tinyMCE;

4. 将第 11 行的 t.params 赋值替换为

   t.params = t.editor.windowManager.getParams();
   

5. 将第 14 行的 t.dom 赋值替换为

   t.dom = new tinymce.dom.DOMUtils(document);
   

6. 删除第 27 行 onOpen 事件被调度的地方，因为在 Tinymce4 中没有这样的事件处理程序

   t.editor.windowManager.onOpen.dispatch(t.editor.windowManager, window);

之后，您可以通过将 file_browser_callback 中 ajaxfilemanager URL 中查询字符串的 editor 参数从 tinymce 更改为 Tinymce 4.x 来初始化 ajaxfilemanager tinymce4.

我有这个

<script type="text/javascript>
tinymce.init({
    selector: "textarea.editor",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    file_browser_callback : ajaxfilemanager
});
function ajaxfilemanager(field_name, url, type, win) {
    var ajaxfilemanagerurl = "/lib/ajaxfilemanager/ajaxfilemanager.php?editor=tinymce4&config=tinymce4&language=cs";
    switch (type) {
        case "image":
            ajaxfilemanagerurl += "&type=img";
            break;
        case "media":
            ajaxfilemanagerurl += "&type=media";
            break;
        case "file":
            ajaxfilemanagerurl += "&type=files";
            break;
        default:
            return false;
    }
    tinymce.activeEditor.windowManager.open(
        {url : ajaxfilemanagerurl,
         title : 'Ajax File Manager',
         width : 782,
         height : 440 },
        {window : win,
         input : field_name}
    );
    return false;
}
</script>

第二步 - 复​​制配置和 CSS

如果你想为tinymce4使用不同的配置和CSS，你必须复制inc/config.tinymce.php到inc/config.tinymce4.config，然后复制theme/default/css/tinymce.css到theme/default /css/tinymce4.css（或其他主题文件夹，如果使用）并修改它们以满足您的需求。

然后您可以通过将file_browser_callback中ajaxfilemanager URL中查询字符串的config参数设置为tinymce4来引用这些文件。见上文。

如果您不需要不同的配置和 CSS，请将 config 参数设置为 tinymce。

就是这样。