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 ...
随机推荐
- 不要让Microsoft edge 打开IE浏览器的设置(兼容性问题)
1打开Microsoft edge 2 打开设置 3 搜索栏搜索IE,打开即可
- NC24325 [USACO 2012 Mar S]Flowerpot
NC24325 [USACO 2012 Mar S]Flowerpot 题目 题目描述 Farmer John has been having trouble making his plants gr ...
- NC53681 「土」巨石滚滚
NC53681 「土」巨石滚滚 题目 题目描述 帕秋莉掌握了一种土属性魔法 她使用这种魔法建造了一个大型的土球,并让其一路向下去冲撞障碍 土球有一个稳定性 \(x\) ,如果 \(x < 0\) ...
- STM32单片机最小系统
1.单片机最小系统的组成部分 STM32单片机最小系统由①主芯片,②上电复位电路,③时钟电路,④电源供电电路组成.同时一个基本完整的单片机功能还应包括下载电路和LED指示电路. 2.单片机主芯片 单片 ...
- RabbitMQ:消息丢失 | 消息重复 | 消息积压的原因+解决方案+网上学不到的使用心得
前言 首先说一点,企业中最常用的实际上既不是RocketMQ,也不是Kafka,而是RabbitMQ. RocketMQ很强大,但主要是阿里推广自己的云产品而开源出来的一款消息队列,其实中小企业用Ro ...
- 什么?让每一个开源项目更安全?啊?还有IDE工具?难道是它?
背景 入编程界6年来,大大小小的安全漏洞是真滴听了不少,xxx通过日志入侵了,xxxx通过请求入侵了,等等等等. 近期fastJson又报安全漏洞,敢巧自己又"被"跳槽到了新公司, ...
- day09 集合排序_Collection接口与Collections工具类
集合的排序 java.util.Collections类 Collections是集合的工具类,里面定义了很多静态方法用于操作集合. Collections.sort(List list)方法 可以对 ...
- .net6与英雄联盟邂逅之——根据官方LCU API制作游戏助手
看了网上很多自己开发的英雄联盟的小助手工具,当时苦于没有api,自己也想做一个.后来发现了其实拳头本身就提供了LCU API在客户端运行的时候会暴露出来. 现在我们就来了解下工具的实现. 查询数据:h ...
- Linux系统下安装windows字体笔记
源文档地址:https://www.e-iceblue.cn/spiredocforjavaconversion/word-to-pdf-font-issue.html windows字体路径:C:\ ...
- go将青龙面板里面的脚本文件都下载到本地
纯粹练手用的,大家轻喷 青龙面板的脚本文件可以下载到本地,这样的话自己可以研究一下对应的脚本文件,能学到更多的知识,原理其实很简单,F12一下就知道了,青龙面板使用Request Headers里面放 ...