TinyMCE插件:RESPONSIVE filemanager 9 安装与配置
程序员文章站
2022-06-05 14:33:28
如果Filemanager 4.x - 6.x 只是TinyMCE的插件的话,RESPONSIVE filemanager 9.x 则已经跳出了这个范畴,它几乎可以替代TinyMCE的所有文件业务流程【本地/远程|上传/删除/修改】。 这使得使用TinyMCE+Filemanager做信息发布的... ......
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']
感谢: