Awesome

Dcat Admin扩展 - Ueditor

Ueditor是一个Dcat Admin的扩展包，集成百度在线编辑器，支持附件上传等功能。

文件上传功能是参照了laravel-ueditor实现的。

安装

请先确保安装了Dcat Admin，执行

composer require dcat-admin-extension/ueditor

然后执行以下命令导入前端静态文件：

php artisan admin:import ueditor

最后用浏览器打开http://localhost:8000/admin/helpers/extensions找到ueditor这一行，点击启用按钮，即可使用。

除了通过界面启用扩展，也可以手动开启扩展：打开config/admin-extensions.php(如果文件不存在请手动创建)，加入以下代码：

return [
    'ueditor' => [
        'enable' => true,
    ],
];

配置

ueditor文件上传相关配置在config/ueditor.php。

/* 前后端通信相关的配置,注释只允许使用多行方式 */
return [
    /* 上传图片配置项 */
    'imageActionName' => 'uploadimage', /* 执行上传图片的action名称 */
    'imageFieldName' => 'upfile', /* 提交的图片表单名称 */
    'imageMaxSize' => 2048000, /* 上传大小限制，单位B */
    'imageAllowFiles' => ['.png', '.jpg', '.jpeg', '.gif', '.bmp'], /* 上传图片格式显示 */
    'imageCompressEnable' => true, /* 是否压缩图片,默认是true */
    'imageCompressBorder' => 1600, /* 图片压缩最长边限制 */
    'imageInsertAlign' => 'none', /* 插入的图片浮动方式 */
    'imageUrlPrefix' => '', /* 图片访问路径前缀 */
    'imagePathFormat' => '/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
    /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
    /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
    /* {time} 会替换成时间戳 */
    /* {yyyy} 会替换成四位年份 */
    /* {yy} 会替换成两位年份 */
    /* {mm} 会替换成两位月份 */
    /* {dd} 会替换成两位日期 */
    /* {hh} 会替换成两位小时 */
    /* {ii} 会替换成两位分钟 */
    /* {ss} 会替换成两位秒 */
    /* 非法字符 \  => * ? ' < > | */
    /* 具请体看线上文档 => fex.baidu.com/ueditor/#use-format_upload_filename */

    /* 涂鸦图片上传配置项 */
    'scrawlActionName' => 'uploadscrawl', /* 执行上传涂鸦的action名称 */
    'scrawlFieldName' => 'upfile', /* 提交的图片表单名称 */
    'scrawlPathFormat' => '/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
    'scrawlMaxSize' => 2048000, /* 上传大小限制，单位B */
    'scrawlUrlPrefix' => '', /* 图片访问路径前缀 */
    'scrawlInsertAlign' => 'none',

    /* 截图工具上传 */
    'snapscreenActionName' => 'uploadimage', /* 执行上传截图的action名称 */
    'snapscreenPathFormat' => '/ueditor/php/image/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
    'snapscreenUrlPrefix' => '', /* 图片访问路径前缀 */
    'snapscreenInsertAlign' => 'none', /* 插入的图片浮动方式 */

    /* 抓取远程图片配置 */
    'catcherLocalDomain' => ['127.0.0.1', 'localhost', 'img.baidu.com'],
    'catcherActionName' => 'catchimage', /* 执行抓取远程图片的action名称 */
    'catcherFieldName' => 'source', /* 提交的图片列表表单名称 */
    'catcherPathFormat' => '/ueditor/php/image/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
    'catcherUrlPrefix' => '', /* 图片访问路径前缀 */
    'catcherMaxSize' => 2048000, /* 上传大小限制，单位B */
    'catcherAllowFiles' => ['.png', '.jpg', '.jpeg', '.gif', '.bmp'], /* 抓取图片格式显示 */

    /* 上传视频配置 */
    'videoActionName' => 'upload-video', /* 执行上传视频的action名称 */
    'videoFieldName' => 'upfile', /* 提交的视频表单名称 */
    'videoPathFormat' => '/ueditor/video/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
    'videoUrlPrefix' => '', /* 视频访问路径前缀 */
    'videoMaxSize' => 102400000, /* 上传大小限制，单位B，默认100MB */
    'videoAllowFiles' => [
        '.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mpeg', '.mpg',
        '.ogg', '.ogv', '.mov', '.wmv', '.mp4', '.webm', '.mp3', '.wav', '.mid'], /* 上传视频格式显示 */

    /* 上传文件配置 */
    'fileActionName' => 'upload-file', /* controller里,执行上传视频的action名称 */
    'fileFieldName' => 'upfile', /* 提交的文件表单名称 */
    'filePathFormat' => '/ueditor/file/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
    'fileUrlPrefix' => '', /* 文件访问路径前缀 */
    'fileMaxSize' => 51200000, /* 上传大小限制，单位B，默认50MB */
    'fileAllowFiles' => [
        '.png', '.jpg', '.jpeg', '.gif', '.bmp',
        '.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mpeg', '.mpg',
        '.ogg', '.ogv', '.mov', '.wmv', '.mp4', '.webm', '.mp3', '.wav', '.mid',
        '.rar', '.zip', '.tar', '.gz', '.7z', '.bz2', '.cab', '.iso',
        '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf', '.txt', '.md', '.xml'
    ], /* 上传文件格式显示 */
    /* 列出指定目录下的图片 */
    'imageManagerActionName' => 'listimage', /* 执行图片管理的action名称 */
    'imageManagerListPath' => '/ueditor/image/', /* 指定要列出图片的目录 */
    'imageManagerListSize' => 20, /* 每次列出文件数量 */
    'imageManagerUrlPrefix' => '', /* 图片访问路径前缀 */
    'imageManagerInsertAlign' => 'none', /* 插入的图片浮动方式 */
    'imageManagerAllowFiles' => ['.png', '.jpg', '.jpeg', '.gif', '.bmp'], /* 列出的文件类型 */

    /* 列出指定目录下的文件 */
    'fileManagerActionName' => 'listfile', /* 执行文件管理的action名称 */
    'fileManagerListPath' => '/ueditor/file/', /* 指定要列出文件的目录 */
    'fileManagerUrlPrefix' => '', /* 文件访问路径前缀 */
    'fileManagerListSize' => 20, /* 每次列出文件数量 */
    'fileManagerAllowFiles' => [
        '.png', '.jpg', '.jpeg', '.gif', '.bmp',
        '.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mpeg', '.mpg',
        '.ogg', '.ogv', '.mov', '.wmv', '.mp4', '.webm', '.mp3', '.wav', '.mid',
        '.rar', '.zip', '.tar', '.gz', '.7z', '.bz2', '.cab', '.iso',
        '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf', '.txt', '.md', '.xml'
    ] /* 列出的文件类型 */
];

更改文件存储Storage

百度编辑器默认是使用文件存储的，即file，如果需要改为其他的存储方式，可以在config/admin.php中加上如下配置：

return [
    ...
    
    /*
    |--------------------------------------------------------------------------
    | Settings for extensions.
    |--------------------------------------------------------------------------
    |
    | You can find all available extensions here
    | https://github.com/dcat-admin-extensions.
    |
    */
    'extensions' => [
        'ueditor' => [
            'disk' => 'oss',
        ],
    ],
];

使用

基本使用

$form->ueditor('content');

修改编辑器高度

$form->ueditor('content')->height(500);

修改文件存储storage

$form->ueditor('content')->disk('oss');

修改文件上传接口

如果你需要用到自定义的文件上传接口，可以通过这个方法覆盖掉默认的上传接口

$form->ueditor('content')->server('file-upload');

修改ueditor配置

$form->ueditor('content')->options([
    'maximumWords' => 1000,
]);