README

此扩展将elFinder 2.1文件管理器集成到Yii框架2.0。

安装

通过composer安装扩展

composer require alexantr/yii2-elfinder

使用方法

配置操作

要使用elFinder，您必须创建并配置控制器。请参见elFinder连接器的完整示例，包括动作，InputFile小部件，CKEditor filebrowser*选项和TinyMCE file_picker_callback选项

<?php

namespace app\controllers;

use alexantr\elfinder\CKEditorAction;
use alexantr\elfinder\ConnectorAction;
use alexantr\elfinder\InputFileAction;
use alexantr\elfinder\TinyMCEAction;
use Yii;
use yii\web\Controller;

class ElfinderController extends Controller
{
    public function actions()
    {
        return [
            'connector' => [
                'class' => ConnectorAction::className(),
                'options' => [
                    'roots' => [
                        [
                            'driver' => 'LocalFileSystem',
                            'path' => Yii::getAlias('@webroot') . DIRECTORY_SEPARATOR . 'uploads',
                            'URL' => Yii::getAlias('@web') . '/uploads/',
                            'mimeDetect' => 'internal',
                            'imgLib' => 'gd',
                            'accessControl' => function ($attr, $path) {
                                // hide files/folders which begins with dot
                                return (strpos(basename($path), '.') === 0) ?
                                    !($attr == 'read' || $attr == 'write') :
                                    null;
                            },
                        ],
                    ],
                ],
            ],
            'input' => [
                'class' => InputFileAction::className(),
                'connectorRoute' => 'connector',
            ],
            'ckeditor' => [
                'class' => CKEditorAction::className(),
                'connectorRoute' => 'connector',
            ],
            'tinymce' => [
                'class' => TinyMCEAction::className(),
                'connectorRoute' => 'connector',
            ],
        ];
    }
}

阅读elFinder文档以配置连接器选项。

InputFile小部件

InputFile小部件的示例，启用了MIME过滤和预览

<?= alexantr\elfinder\InputFile::widget([
    'name' => 'attributeName',
    'clientRoute' => 'elfinder/input',
    'filter' => ['image'],
    'preview' => function ($value) {
        return yii\helpers\Html::img($value, ['width' => 200]);
    },
]) ?>

注意1: 过滤选项用于根据文件MIME类型显示特定文件。请参阅elFinder文档中的onlyMimes选项。

注意2: 预览只显示预定义（先前保存）的输入值，不会在新选择后即时更新。

如果您想在ActiveForm中使用InputFile小部件，可以这样做

<?= $form->field($model, 'attributeName')
    ->widget(alexantr\elfinder\InputFile::className(), [
        'clientRoute' => 'elfinder/input',
    ]) ?>

使用textarea而不是text输入（对于启用了多选可能很有用）

<?= alexantr\elfinder\InputFile::widget([
    'name' => 'attributeName',
    'clientRoute' => 'elfinder/input',
    'textarea' => true,
    'textareaRows' => 3, // default is 5
]) ?>

启用多选以在一个输入中选择多个文件

<?= alexantr\elfinder\InputFile::widget([
    'name' => 'attributeName',
    'clientRoute' => 'elfinder/input',
    'multiple' => true,
]) ?>

默认的文本输入路径分隔符是逗号，textarea的换行符。您可以在InputFileAction配置中更改它们

class ElfinderController extends Controller
{
    public function actions()
    {
        return [
            // ...
            'input' => [
                'class' => InputFileAction::className(),
                'connectorRoute' => 'connector',
                'separator' => ',',
                'textareaSeparator' => '\n', // newline character in javascript
            ],
            // ...
        ];
    }
}

与CKEditor集成

要使用CKEditor小部件（如此）使用elFinder，您需要指定选项filebrowserBrowseUrl和（或）filebrowserImageBrowseUrl

<?= alexantr\ckeditor\CKEditor::widget([
    'name' => 'attributeName',
    'clientOptions' => [
        // ...
        'filebrowserBrowseUrl' => yii\helpers\Url::to(['elfinder/ckeditor']),
        'filebrowserImageBrowseUrl' => yii\helpers\Url::to(['elfinder/ckeditor', 'filter' => 'image']),
    ],
]) ?>

注意: 对于filebrowserImageBrowseUrl，我们使用过滤器查询参数仅显示图像。

与TinyMCE 4 & 5集成

要使用TinyMCE小部件（如此）使用elFinder，您需要指定选项file_picker_callback

<?= alexantr\tinymce\TinyMce::widget([
    'name' => 'attributeName',
    'clientOptions' => [
        // ...
        'file_picker_callback' => alexantr\elfinder\TinyMCE::getFilePickerCallback(['elfinder/tinymce']),
    ],
]) ?>

注意: 选项file_picker_callback从TinyMCE js插件的4.1.0版本开始可用。

在getFilePickerCallback()的第二个参数中，您可以设置tinymce.activeEditor.windowManager.open（TinyMCE 4）或tinymce.activeEditor.windowManager.openUrl（TinyMCE 5）的额外设置

TinyMCE::getFilePickerCallback(['elfinder/tinymce'], ['width' => 1200, 'height' => 600])

独立文件管理器

将ElFinder小部件添加到任何视图

<?= alexantr\elfinder\ElFinder::widget([
    'connectorRoute' => ['elfinder/connector'],
    'settings' => [
        'height' => 640,
    ],
    'buttonNoConflict' => true,
]) ?>

注意: 如果您使用Bootstrap 3，请启用buttonNoConflict选项以解决Bootstrap和jQuery UI按钮之间的冲突。

alexantr / yii2-elfinder

维护者

详情