dcat-admin-extension/ueditor 问题修复 & 功能扩展

解决BUG、新增功能、兼容多环境部署,快速响应你的开发需求

邮箱:yvsm@zunyunkeji.com | QQ:316430983 | 微信:yvsm316

dcat-admin-extension/ueditor

Composer 安装命令:

composer require dcat-admin-extension/ueditor

包简介

百度在线编辑器

README 文档

README

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,
]);

dcat-admin-extension/ueditor 适用场景与选型建议

dcat-admin-extension/ueditor 是一款 基于 JavaScript 开发的 Composer 扩展包,目前已累计 5.59k 次下载、GitHub Stars 达 20, 最近一次更新时间为 2019 年 06 月 21 日, 在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向: 「extension」 「dcat-admin」 等业务场景。在实际项目中,围绕这些方向常见需要落地的问题包括:接口对接、性能调优、并发安全、与既有框架(Laravel / ThinkPHP / Yii / Webman 等)的兼容适配,以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 dcat-admin-extension/ueditor 或与其功能相近的方案,如果你在选型或落地过程中遇到问题,例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查,欢迎联系我们协助评估。

围绕 dcat-admin-extension/ueditor 我们能提供哪些服务?
定制开发 / 二次开发

基于 dcat-admin-extension/ueditor 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复;针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维;也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ:316430983 微信:yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

统计信息

  • 总下载量: 5.59k
  • 月度下载量: 0
  • 日度下载量: 0
  • 收藏数: 20
  • 点击次数: 15
  • 依赖项目数: 0
  • 推荐数: 0

GitHub 信息

  • Stars: 20
  • Watchers: 0
  • Forks: 10
  • 开发语言: JavaScript

其他信息

  • 授权协议: MIT
  • 更新时间: 2019-06-21