适用于Tinymce 4.x的Ajaxfilemanager

Question

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

Answer 1

...，所以如果你有兴趣，你也可以让它运作起来。您只需要创建一个tinymce4 init脚本（必需）并复制tinymce config和CSS（可选）。

第一步 - 在jscripts /

中创建新的javascript

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

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

--- 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. 在你最喜欢的编辑器中打开for_tinymce4.js（vim，nano，joe，gedit，...）
第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中的查询字符串的编辑器参数从 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 。

那是所有人。