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 ...
随机推荐
- NC24325 [USACO 2012 Mar S]Flowerpot
NC24325 [USACO 2012 Mar S]Flowerpot 题目 题目描述 Farmer John has been having trouble making his plants gr ...
- 最小生成树 链式前向星 Prim&Kruskal
Prim: Prim的思想是将任意节点作为根,再找出与之相邻的所有边(用一遍循环即可),再将新节点更新并以此节点作为根继续搜,维护一个数组:dis,作用为已用点到未用点的最短距离. 证明:Prim算法 ...
- Kafka启动遇到ERROR Exiting Kafka due to fatal exception (kafka.Kafka$) 解决办法 从kafka的根目录启动 bin/kafka-server-start.sh config/server.properties
Mysql配置读写数据库 ERROR 1227 (42000): Access denied; you need (at least one of) the SUPER privilege(s) fo ...
- SpringBoot接口 - 如何生成接口文档之非侵入方式(通过注释生成)Smart-Doc?
通过Swagger系列可以快速生成API文档,但是这种API文档生成是需要在接口上添加注解等,这表明这是一种侵入式方式: 那么有没有非侵入式方式呢, 比如通过注释生成文档? 本文主要介绍非侵入式的方式 ...
- 算法竞赛进阶指南——0x15 字符串学习笔记
K M P模式匹配 #include <bits/stdc++.h> using namespace std; #define N 100 char s[N]; char m[N]; in ...
- java------JRE和JDK
JDK(Java Development kit):Java开发工具包 包括 JVM(Java Virtual Machine):java虚拟机,真正运行java程序的地方(Java语言在运行时并不是 ...
- python开发环境配置(Windows)
简介 由于在搭建pyhon开发环境时会出现各种各样的问题,因此将这些问题记录下来 1.下载python 从官网下载对应系统的python版本(最新稳定版即可):官网地址为:python下载地址, 建议 ...
- Docker默认桥接网络是如何工作的
1. 启动一个Docker容器 一般来说,我们起一个容器比如一个简单的nginx服务会向这样 docker run -d --rm nginx:XXX OK容器起来了,但是并不能通过宿主机被外面的机器 ...
- YII扩展功能图
- Python3的原生协程(Async/Await)和Tornado异步非阻塞
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_113 我们知道在程序在执行 IO 密集型任务的时候,程序会因为等待 IO 而阻塞,而协程作为一种用户态的轻量级线程,可以帮我们解决 ...