Laravel项目使用TinyMCE编辑器与elFinder文件管理器

Laravel文档啃得差不多了，终于入门了，目前在写一个 化学实验室安全教育及在线考试系统 ： HFUT_ChemLab ，求 Star 。

目前已经开发完了写文章功能，内置 TinyMCE 编辑器与 elFinder 文件管理器复制上传文件，可以在文章中插入图片、视频、附件等等功能：

下面说下怎么安装：

安装tinyMCE编辑器

到 tinyMCE 下载安装包： https://www.tinymce.com/download/ ，然后解压放到项目的 /public/js 下。

在需要编辑器的地方，插入 <textarea></textarea> 标签，然后在项目中引入以下 js 代码：

tinymce.init({
     selector: 'textarea',
     height: 360,
     file_browser_callback : elFinderBrowser,
     plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
      'searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking',
      'save table contextmenu directionality emoticons template paste textcolor'
    ],
     toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
 });

这时候编辑器插入完成。

安装elFinder文件管理器

主要是安装这个坑比较多，最大的坑是上传图片不显示缩略图。

这是 elFinder 的项目地址： https://github.com/barryvdh/laravel-elfinder 。

在项目目录下：

composer require barryvdh/laravel-elfinder

接着将 ElfinderServiceProvider 添加到 /config/app.conf 的 providers 数组中：

'Barryvdh\Elfinder\ElfinderServiceProvider'

在 composer.json 的 post-updated-cmd 字段中加入：

"php artisan elfinder:publish"

生成配置文件：

php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=config

生成视图文件：

php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=views

注意 elfinder 引用 google 的 cdn ，导致访问速度慢，在

/resources/views/vendor/elfinder/ 中，将里面所有 php 文件的引用外链改成：

<script src=http://www.tuicool.com/articles/"http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js">script>
<link href="http://cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.min.js">script>

在配置文件 /config/elfinder.php 中， disks 数组改成这样：

'disks' => [
    'local',
],

配置中间件比较坑，我是用 laravel 5.2 ，所以需要在配置文件中 middleware 加入 web ：

'route' => [
    'prefix' => 'admin/resources/files',
    'middleware' => ['web', 'auth'], //Set to null to disable middleware filter
],

缩略图不显示问题，在配置文件中的 root_options 中加入：

'root_options' => array(
    'tmbURL' => '/.tmb'
),

最后为了 tinyMCE 能正常调用 elfinder ，在你的项目加入如下 js 代码：

function elFinderBrowser (field_name, url, type, win) {
  tinymce.activeEditor.windowManager.open({
    file: '/admin/resources/files/tinymce4',// 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;
}

暂时应该没什么问题了吧，希望各位能 star 我的项目。。。