thinkphp5.1中适配百度富文本编辑器ueditor
百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈。然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾特我啊,谢谢分享
首先,下载百度编辑包,然后打开你的thinkPHP项目,添加以下代码

public function config()
{
$config = [
/* 前后端通信相关的配置,注释只允许使用多行方式 */ /* 上传图片配置项 */
"imageActionName" => "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName" => "upfile", /* 提交的图片表单名称 */
"imageMaxSize" => 2048000, /* 上传大小限制,单位B */
"imageAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable" => true, /* 是否压缩图片,默认是true */
"imageCompressBorder" => 1600, /* 图片压缩最长边限制 */
"imageInsertAlign" => "none", /* 插入的图片浮动方式 */
"imageUrlPrefix" => "", /* 图片访问路径前缀 */
"imagePathFormat" => "index/uplod/saveimg/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" => "index/uplod/saveimg/image/{yyyy}{mm}{dd}/{time}{rand=>6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"scrawlMaxSize" => 2048000, /* 上传大小限制,单位B */
"scrawlUrlPrefix" => "", /* 图片访问路径前缀 */
"scrawlInsertAlign" => "none", /* 截图工具上传 */
"snapscreenActionName" => "uploadimage", /* 执行上传截图的action名称 */
"snapscreenPathFormat" => "/index/uplod/saveimg/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" => "index/uplod/saveimg/image/{yyyy}{mm}{dd}/{time}{rand=>6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"catcherUrlPrefix" => "", /* 图片访问路径前缀 */
"catcherMaxSize" => 2048000, /* 上传大小限制,单位B */
"catcherAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */ /* 上传视频配置 */
"videoActionName" => "uploadvideo", /* 执行上传视频的action名称 */
"videoFieldName" => "upfile", /* 提交的视频表单名称 */
"videoPathFormat" => "index/uplod/saveimg/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" => "uploadfile", /* controller里,执行上传视频的action名称 */
"fileFieldName" => "upfile", /* 提交的文件表单名称 */
"filePathFormat" => "index/uplod/saveimg/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" => "index/uplod/saveimg/image/", /* 指定要列出图片的目录 */
"imageManagerListSize" => 20, /* 每次列出文件数量 */
"imageManagerUrlPrefix" => "", /* 图片访问路径前缀 */
"imageManagerInsertAlign" => "none", /* 插入的图片浮动方式 */
"imageManagerAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */ /* 列出指定目录下的文件 */
"fileManagerActionName" => "listfile", /* 执行文件管理的action名称 */
"fileManagerListPath" => "index/uplod/saveimg/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"
] /* 列出的文件类型 */ ];
return $config;
}
public function type($action)
{
switch ($action) {
case $action == 'config':
return json($this->config());
break;
case $action == 'uploadimage':
return $this->saveimg();
break;
}
}
public function saveimg()
{
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file('upfile');
// 移动到框架应用根目录/uploads/ 目录下
$info = $file->move('./uploads');
if ($info) {
// 成功上传后 获取上传信息
// 输出 jpg
//echo $info->getExtension();
// 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
//echo $info->getSaveName();
// 输出 42a79759f284b767dfcb2a0197904287.jpg
//echo $info->getFilename();
//{"state":"SUCCESS","url":"\/ueditor\/php\/upload\/image\/20200718\/1595038252945471.png","title":"1595038252945471.png","original":"\u56fe\u7247.png","type":".png","size":5851}
$saveinfo=[
'state' => "SUCCESS",
'url' => '/uploads/'.$info->getSaveName(),
'title' => '',
'originl' => '图片.png',
"type" => ".png",
"size" => 5851 ];
return json($saveinfo);
} else {
// 上传失败获取错误信息
echo $file->getError();
}
}
由于百度富文本编辑是使用了统一接口,所以只能按照它的要求来了
在config.js里的找到服务器统一请求接口路径(如下),需要贴上自己的接口,然后就可以用了

window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
//, serverUrl: URL + "php/controller.php"
, serverUrl: "index/upload/type"

thinkphp5.1中适配百度富文本编辑器ueditor的更多相关文章
- vue项目中使用百度富文本编辑器ueditor
第一步,安装依赖,并且把ueditor整个文件夹放入public里边 第二步,在你需要编辑的地方引入,或者main.js中全局引入 XX.vue文件中写入下面代码,创建编辑器. <vue-ued ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
- 百度富文本编辑器ueditor使用启示
百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...
- springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
- 对于MVC中应用百度富文本编辑器问题的解决办法
1.对于应用富文本编辑器post提交表单内容提示有危险的解决办法: [ValidateInput(false)] //文本编辑器的表单提交不用提示危险 [HttpPost] public Action ...
- 在MVC中应用百度富文本编辑器
1.下载.NET版本的百度富文本编辑器,前往 下载.NET版本百度富文本框 2.解压下载的.zip压缩包,将utf8-.net文件夹名称改为:ueditor,复制到MVC根目录下面.结构如下: App ...
- 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)
折腾了一下午终于把百度富文本编辑器ueditor搞定了! 项目地址:https://github.com/724888/lightnote_new 首先我参考了一个ueditor的demo ...
- 在java项目中加入百度富文本编辑器
富文本编辑器在项目中很常见,他可以将文本,图片等信息存入数据库,在编辑一些图文混排的信息的时候很有用,比如商城项目的商品详情页,包含很多带有样式的文字和图片. 此前一直使用的百度的富文本编辑器uedi ...
随机推荐
- osx系统使用技巧 -- 虚拟机virtualbox
p.p1 { margin: 0; font: 18px Menlo; color: rgba(255, 255, 255, 1); background-color: rgba(102, 130, ...
- Linux操作系统(4):磁盘分区、挂载
Outline: ① lsblk :查看所有设备挂载情况 ② df -h :查询系统整体磁盘使用情况 ③ du -h /目录 :查询指定目录的磁盘占用情况 ④ mount :查询系统中已经挂载的设备 ...
- 记一次实战 Shiro反序列化内网上线
Shiro反序列化内网上线 说明:此贴仅分享用于各安全人员进行安全学习提供思路,或有合法授权的安全测试,请勿参考用于其他用途,如有,后果自负.感谢各位大佬的关注 目标:152.xxx.xxx.xxx目 ...
- 2022-07-09 第六组 润土 CSS学习笔记
HTML:用来描述网页的一种语言. 超文本语言.动画.音频.视频.特效.超链. 用标签定义网页 浏览器 流行浏览器: IE微软宣布永久关闭 firefox火狐 Chrom谷歌 Sarifi vscod ...
- 2022-7-12 javascript(2) 第七组 刘昀航
@ 目录 2022-7-12学习 第七组 刘昀航 前情提要 一.for循环 二.for in循环 三.while 和 do...while循环 1.while do... while 四.内置函数 五 ...
- Solution -「基环树」做题记录
写的大多只是思路,比较简单的细节和证明过程就不放了,有需者自取. 基环树简介 简单说一说基环树吧.由名字扩展可得这是一类以环为基础的树(当然显然它不是树. 通常的表现形式是一棵树再加一条非树边,把图画 ...
- RabbitMQ消费者消失与 java OOM
原因: 下午先是收到钉钉告警有一个消费者系统任务积压, 当时以为就是有范围上量没有当回事,后来客服群开始反馈说有客户的数据没有生成.这个时候查看mq的后台,发现任务堆积数量还是很多. 这个时候登录一台 ...
- electron-vue打包出现问题汇总
打包过程中出现下载status code 404 1.可能是网络不好,导致相关electron包无法正常下载,也有可能是需要挂代理 2.可能是编译过程的链接出现错误,一般为网址中缺少或多了一个v,建议 ...
- 流量如何才能变现?实际测试谷歌广告联盟(Google Adsense)的广告效果以及如何优化相关代码
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_150 2010年,谷歌正式退出中国市场,无数人扼腕叹息,如今十年过去了,谷歌还有两条重要的业务线并没有完全退出,一个是页面统计业务 ...
- 简单学习一下ibd数据文件解析
来源:原创投稿 作者:花家舍 简介:数据库技术爱好者. GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 简单学习一下数据文件解析 这是尝试使用Golang语言简单解析My ...