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

RESPONSIVE filemanager 功能:

  • 文件上传
  • 文件下载
  • 重命名文件
  • 删除文件
  • 新建文件夹
  • 为每个用户创建子目录

上传文件效果图:

TinyMCE插件:RESPONSIVE filemanager 9 安装与配置_第1张图片

浏览文件效果图:

TinyMCE插件:RESPONSIVE filemanager 9 安装与配置_第2张图片

文件说明:

TinyMCE插件:RESPONSIVE filemanager 9 安装与配置_第3张图片

  • 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插件:RESPONSIVE filemanager 9 安装与配置_第4张图片

安装

内容编辑页面中的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 ... | ...", //工具栏配置
});

TinyMCE插件:RESPONSIVE filemanager 9 安装与配置_第5张图片

安装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库下载至本地来调用。




对图片进行了CDN的同学,可以在这里修改成对应的CDN地址。







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

转载声明:本站文章无特别说明,皆为原创,版权所有,转载请注明:Dy大叔的日常。

转载自 TinyMCE插件:RESPONSIVE filemanager 9 安装与配置 | XDY.ME@Dy大叔的日常

TinyMCE插件:RESPONSIVE filemanager 9 安装与配置_第6张图片

你可能感兴趣的:(PHP,Web前端)