2013-04-15 10 views
5

誰かがすでにelFinderを新しい(4b1)バージョンのTinyMCEに統合しようとしていますか? previousimplementationが機能していないようです。 いくつかのスニペットを投稿してください、ありがとうございます。TinyMCE 4 with elFinder

答えて

7

ソリューションを見つけました:

  1. elfinderという名前のプラグインでフォルダを作成します。
  2. 最新のelFinderをダウンロードしてこのプラグイン/ elfinderに入れます。
  3. プラグイン(tinymce.init)のリストにプラグイン 'elfinder'を追加します。
  4. 名前の変更JS/elfinder.min.jsにJS/plugin.min.js
  5. プラグインのルートフォルダ内のファイルplugin.min.js(elfinder/plugin.min.js)内部
  6. 挿入し、次のテキストを作成します。そして、保存:

tinymce.PluginManager.add( "elfinder"、機能(編集、URL){

editor.settings.file_browser_callback =機能(ID、値、タイプ、 勝利){

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

+0

おかげで、それは私のために働いていません。 – WebbedIT

+0

あなたは私が言ったようにすべてをしましたか? – dikirill

+0

@dikirillはこれをレール2に使用できますか?私はエラー 'メソッドを呼び出すことができません 'nullのブラウザのコンソールのdialogelfinder' – Nithin

5

私は、以下のステップ時に動作するようになりました、Wikiの更新:https://github.com/Studio-42/elFinder/wiki/Integration-with-TinyMCE-4.x

プライマリ変更はTinyMCEは、任意のより多くのプラグインInlinePopupを使用していないということである、コールバックが変更され、代わりにfile_browser_callback : 'elFinderBrowser'のあなたがする必要はあり引用符を削除します。TinyMCEのinitをで

file_browser_callback : elFinderBrowser

あなたのJavaScriptにelFinderBrowserコールバックを追加します。

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> 
+0

投稿の冒頭にあるドキュメントへのリンクが正しいコードを持っています。そこからのコードは、少なくとも私のために働いた! – 6bytes

+0

誰かがinit関数の目的を知っていますか? – emfi

関連する問題