README

此扩展将 elFinder 2.1 文件管理器集成到 Yii 框架 2.0 中。它是一个添加了编辑器 src 到资源的版本。

安装

通过 composer 安装扩展

composer require d1soft/yii2-elfinder

使用方法

配置动作

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

<?php

namespace app\controllers;

use d1soft\elfinder\CKEditorAction;
use d1soft\elfinder\ConnectorAction;
use d1soft\elfinder\InputFileAction;
use d1soft\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 小部件

启用 mime 过滤器和预览的 InputFile 小部件示例

<?= d1soft\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(d1soft\elfinder\InputFile::className(), [
        'clientRoute' => 'elfinder/input',
    ]) ?>

使用 textarea 代替文本输入（在启用多选时可能很有用）

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

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

<?= d1soft\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 集成

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

<?= d1soft\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 集成

要使用 elFinder 与 TinyMCE 4 小部件（如此一个）集成，您需要指定选项 file_picker_callback

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

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

在 getFilePickerCallback() 的第二个参数中，您可以设置额外的 tinymce.WindowManager.open 设置

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

独立文件管理器

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

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

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

d1soft / yii2-elfinder

维护者

详细信息