javascript 带有 elFinder 的 TinyMCE 4

TinyMCE 4 with elFinder

提问by dikirill

Is somebody already tried to integrate elFinder into new (4b1) version of TinyMCE? It looks like previousimplementationisn't working. Please post some snippets, thanks a lot.

有人已经尝试将 elFinder 集成到 TinyMCE 的新 (4b1) 版本中吗？看起来以前的实现不起作用。请发一些片段，非常感谢。

回答by dikirill

Ok. I found the solution:

行。我找到了解决方案：

1. Create folder in plugins named elfinder.
2. Download latest elFinderand put into this folder plugins/elfinder.
3. Add plugin 'elfinder' to the list of plugins (tinymce.init).
4. Rename js/elfinder.min.js to js/plugin.min.js
5. Create file plugin.min.js in root folder of plugin (elfinder/plugin.min.js)
6. Insert next text inside and save:

1. 在名为 elfinder 的插件中创建文件夹。
2. 下载最新的elFinder并放入这个文件夹 plugins/elfinder。
3. 将插件“elfinder”添加到插件列表 (tinymce.init)。
4. 将 js/elfinder.min.js 重命名为 js/plugin.min.js
5. 在插件的根文件夹中创建文件 plugin.min.js (elfinder/plugin.min.js)
6. 在里面插入下一个文本并保存：

tinymce.PluginManager.add("elfinder", function (editor, url) {

editor.settings.file_browser_callback = function (id, value, type, win) {

  $('<div />').dialogelfinder({
     url: url + '/php/connector.php',
     commandsOptions: {
        getfile: {
           oncomplete: 'destroy'
        }
     },
     getFileCallback: function (url)
     {
        var fieldElm = win.document.getElementById(id);
        fieldElm.value = editor.convertURL(url, null, true);
        if ("fireEvent"in fieldElm) {
           fieldElm.fireEvent("onchange")
        } else {
           var evt = document.createEvent("HTMLEvents");
           evt.initEvent("change", false, true);
           fieldElm.dispatchEvent(evt)
        }
     }
  });   

}; }, ["elfinder/js"]);

tinymce.PluginManager.add("elfinder", function (editor, url) {

editor.settings.file_browser_callback = function (id, value, type, win) {

  $('<div />').dialogelfinder({
     url: url + '/php/connector.php',
     commandsOptions: {
        getfile: {
           oncomplete: 'destroy'
        }
     },
     getFileCallback: function (url)
     {
        var fieldElm = win.document.getElementById(id);
        fieldElm.value = editor.convertURL(url, null, true);
        if ("fireEvent"in fieldElm) {
           fieldElm.fireEvent("onchange")
        } else {
           var evt = document.createEvent("HTMLEvents");
           evt.initEvent("change", false, true);
           fieldElm.dispatchEvent(evt)
        }
     }
  });   

}; }, ["elfinder/js"]);

回答by Barryvdh

I updated the Wiki, should work now when following the steps: https://github.com/Studio-42/elFinder/wiki/Integration-with-TinyMCE-4.x

我更新了 Wiki，按照以下步骤现在应该可以工作了：https: //github.com/Studio-42/elFinder/wiki/Integration-with-TinyMCE-4.x

Primary changes are that TinyMCE doesn't use the InlinePopup plugin any more, the callback is changed and instead of file_browser_callback : 'elFinderBrowser'you have to remove the quotes:

主要的变化是 TinyMCE 不再使用 InlinePopup 插件，回调发生了变化，而不是file_browser_callback : 'elFinderBrowser'你必须删除引号：

In the TinyMCE init: file_browser_callback : elFinderBrowser

在 TinyMCE 初始化中： file_browser_callback : elFinderBrowser

Add the elFinderBrowser callback to your javascript:

将 elFinderBrowser 回调添加到您的 javascript 中：

function elFinderBrowser (field_name, url, type, win) {
  tinymce.activeEditor.windowManager.open({
    file: '/elfinder/elfinder.html',// use an absolute path!
    title: 'elFinder 2.0',
    width: 900,  
    height: 450,
    resizable: 'yes'
  }, {
    setUrl: function (url) {
      win.document.getElementById(field_name).value = url;
    }
  });
  return false;
}

And finally modify/copy elfinder.html file to use the callback:

最后修改/复制 elfinder.html 文件以使用回调：

<!-- Include jQuery, jQuery UI, elFinder (REQUIRED) -->

<script type="text/javascript">
  var FileBrowserDialogue = {
    init: function() {
      // Here goes your code for setting your custom things onLoad.
    },
    mySubmit: function (URL) {
      // pass selected file path to TinyMCE
      top.tinymce.activeEditor.windowManager.getParams().setUrl(URL);

      // close popup window
      top.tinymce.activeEditor.windowManager.close();
    }
  }

  $().ready(function() {
    var elf = $('#elfinder').elfinder({
      // set your elFinder options here
      url: 'php/connector.php',  // connector URL
      getFileCallback: function(file) { // editor callback
        FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE 
      }
    }).elfinder('instance');      
  });
</script>