RESPONSIVE filemanager 功能：

• 檔案上傳
• 檔案下載
• 重新命名檔案
• 刪除檔案
• 新建資料夾
• 為每個使用者建立子目錄

上傳檔案效果圖:

瀏覽檔案效果圖:

檔案說明：

• filemanager（核心程式檔案），放入TinyMCE的Plugins（外掛）檔案中
• source（檔案上傳資料夾），放在任意位置，配合$upload_dir路徑一起使用
• thumbs（縮圖資料夾），放在任意位置，縮圖會自己生成，配合$thumbs_base_path路徑一起使用
• tinymce/plugins/responsivefilemanager
  （檔案上傳按鈕），如路徑所示新增至plugins資料夾，因TinyMCE自帶的檔案/圖片管理按鈕一次只能往編輯器中顯示一個圖片，所以外掛用了一個全新的檔案管理按鈕來批量顯示圖片。

原始碼主要結構介紹

• dialog.php用於介面顯示
• js/include.js用於前臺向後臺提交請求（如刪除、重新命名等）
• force_download.php下載檔案
• execute.php接受前臺請求，呼叫相應的include/utils.php中的方法
• include/utils.php真正建立、重新命名、刪除等功能的實現
• lang實現本地化的語言

結構圖

安裝

內容編輯頁面中的TinyMCE呼叫程式碼加入以下語法

tinymce.init({
    ...
    ...
    relative_urls: false, //如果選項置為 true，返回的URL將會是基於 document_base_url 的相對連結。如果置為 false，所有的URL會被轉換成絕對路徑。
    plugins: [
        "... image ...",
        "...",
        'responsivefilemanager',
    ],
    image_advtab: true, //開啟圖片上傳的高階選項功能
    external_filemanager_path: '.../.../filemanager/', //外部外掛絕對路徑
    filemanager_title: 'Responsive Filemanager', //外部外掛標題
    external_plugins: {
        'filemanager': '.../.../filemanager/plugin.min.js'
    }, //外部外掛js配置檔案
    toolbar1: "... | ... | responsivefilemanager image ... | ...", //工具欄配置
});
 

安裝responsivefilemanager外掛後，紅色框內的按鈕是無法把圖片錄入至編輯框內的，因為外掛支援批量多圖錄入，所以需要使用新的按鈕（綠色框內）。

配置

核心配置檔案（filemanager/config/config.php）

• $base_url 域名字首，預設已設定自動獲取http://
• $upload_dir 設定檔案上傳的根目錄（如"/root/"）
• $thumbs_base_path 設定縮圖存放的位置（如"/root/thumbs/"）
• $MaxSizeUpload 定義最大上傳檔案的大小（注：小於等於php配置的最大值）
• $default_language 定義語言
• $ext 定義可上傳的檔案型別

圖片資訊獲取（filemanager/include/php_image_magician.php）

在2724行附近

//========== mime_content_type方法 php 5.3版後已被官方拋棄，新方法是finfo_open()
        $extension = finfo_open(FILEINFO_MIME_TYPE);
        $extension = finfo_file($extension, $file);
      //$extension = mime_content_type($file);
//========== xdy.me.20181118

檔案操作介面（filemanager/dialog.php）

這兩個庫直接影響Filemanager的使用者體驗，但是ajax.googleapis.com很不穩定，時常無法訪問，所以需要將兩個jquery庫下載至本地來呼叫。

<*script src="js/jquery-1.11.3.min.js" type="text/javascript"><*/script>
<*script src="js/jquery-ui-1.11.4.min.js" type="text/javascript"><*/script>
<*!--<*script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><*/script>-->
<*!--<*script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"><*/script>-->

對圖片進行了CDN的同學，可以在這裡修改成對應的CDN地址。

<*!--<*input type="hidden" id="upload_dir" value="--><*?php //echo $config['upload_dir'];?><*!--" />-->
<*!--<*input type="hidden" id="cur_dir" value="--><*?php //echo $cur_dir;?><*!--" />-->
<*input type="hidden" id="upload_dir" value="/" />
<*input type="hidden" id="cur_dir" value="/<*?php echo $subdir;?>" />

<*!--<*input type="hidden" id="base_url" value="--><*?php //echo $config['base_url']?><*!--"/>-->
<*input type="hidden" id="base_url" value="http://xxx.xdy.me"/>

PS1：要建立中文的資料夾，需要修改include/util.php中fix_path方法

function fix_path($path,$transliteration){
  $info=pathinfo($path);
  $tmp_path = $info['dirname'];
  $filename = end(explode("/",$path));
  $str=fix_filename($filename,$transliteration);
  if($tmp_path!="")
    return $tmp_path.DIRECTORY_SEPARATOR.$str;
  else
    return $str;
}

PS2：為每個使用者指定子目錄新增session變數$_SESSION['subfolder']

感謝：

• https://blog.csdn.net/lw545034502/article/details/81870686
• https://www.cnblogs.com/djiz/p/7611947.html
• https://stackoverflow.com/questions/47244203/responsivefilemanager-tinymce-uncaught-typeerror
• https://blog.csdn.net/u014091659/article/details/24337885
• https://www.cnblogs.com/wawahaha/p/4537549.html
• http://hant.ask.helplib.com/javascript/post_2505068
• https://blog.csdn.net/hooting/article/details/23277947