TinyMCE 4 с elFinder

Question

Кто-нибудь уже пытался интегрировать elFinder в новую (4b1) версию TinyMCE? Похоже, предыдущая реализация не работает. Пожалуйста, отправьте некоторые фрагменты, большое спасибо.

Answer 1

Хорошо. Я нашел решение:

1. Создайте папку в плагинах с именем elfinder.
2. Скачайте последнюю версию elFinder и поместите в эту папку плагины / 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 = функция (идентификатор, значение, тип, выигрыш) {

  $('<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"]);

Answer 2

Я обновил вики, теперь должен работать, когда выполните следующие действия: https://github.com/Studio-42/elFinder/wiki/Integration-with-TinyMCE-4.x

Основные изменения в том, что TinyMCE больше не использует плагин InlinePopup, обратный вызов изменен и вместо file_browser_callback : 'elFinderBrowser' Вы должны удалить цитаты:

В TinyMCE init:file_browser_callback : elFinderBrowser

Добавьте обратный вызов 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;
}

И, наконец, измените / скопируйте файл 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>