TinyMCE插件：RESPONSIVE filemanager 9 安装与配置

2022-10-22 15:48:11

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']`

感谢：

码农公寓