百度富文本编辑器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的更多相关文章

  1. vue项目中使用百度富文本编辑器ueditor

    第一步,安装依赖,并且把ueditor整个文件夹放入public里边 第二步,在你需要编辑的地方引入,或者main.js中全局引入 XX.vue文件中写入下面代码,创建编辑器. <vue-ued ...

  2. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  3. 百度富文本编辑器ueditor使用总结

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

  4. 百度富文本编辑器ueditor使用启示

    百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...

  5. springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

  6. 对于MVC中应用百度富文本编辑器问题的解决办法

    1.对于应用富文本编辑器post提交表单内容提示有危险的解决办法: [ValidateInput(false)] //文本编辑器的表单提交不用提示危险 [HttpPost] public Action ...

  7. 在MVC中应用百度富文本编辑器

    1.下载.NET版本的百度富文本编辑器,前往 下载.NET版本百度富文本框 2.解压下载的.zip压缩包,将utf8-.net文件夹名称改为:ueditor,复制到MVC根目录下面.结构如下: App ...

  8. 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)

    折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的demo ...

  9. 在java项目中加入百度富文本编辑器

    富文本编辑器在项目中很常见,他可以将文本,图片等信息存入数据库,在编辑一些图文混排的信息的时候很有用,比如商城项目的商品详情页,包含很多带有样式的文字和图片. 此前一直使用的百度的富文本编辑器uedi ...

随机推荐

  1. Java开发学习(九)----IOC之核心容器

    这里所说的核心容器,大家可以把它简单的理解为ApplicationContext,前面虽然已经用到过,但是并没有系统的介绍过,接下来咱们从以下几个问题入手来下容器的相关知识: 如何创建容器? 创建好容 ...

  2. labview从入门到出家6(进阶篇)--移位寄存器的使用

    前面介绍了如何熟悉和使用Labview自带的库函数以及调试方式,大家后期基本可以凭借这两个方式从入门到出家了,哈哈,后面就靠各位同仁99%的努力了.这篇为啥要讲移位寄存器呢,主要是之前做的项目和经验告 ...

  3. Windows JDK 的下载与安装

    Java Development Kit 简称 JDK,任何需要开发 Java 程序的环境都需要进行安装 JDK. JDK 下载地址:https://www.oracle.com/java/techn ...

  4. 0016:单源最短路径(dijkstra算法)

    题目链接:https://www.luogu.com.cn/problem/P4779 题目描述:给定一个 n 个点,m 条有向边的带非负权图,计算从 s 出发,到每个点的距离. 这道题就是一个单源最 ...

  5. MongoDB慢查询与索引

    MongoDB慢查询 慢查询分析 开启内置的慢查询分析器 db.setProfilingLevel(n,m),n的取值可选0,1,2 0:表示不记录 1:表示记录慢速操作,如果值为1,m需要传慢查询的 ...

  6. Note -「0/1 Fractional Programming」

    What is that? Let us pay attention to a common problem that we often meet in daily life: There are \ ...

  7. ACWing95. 费解的开关

    题解 这道题目有三个状态条件值得考虑: 每一个开关被按0次或者1次才有意义,如果超过1次,那么等同于按0或1次. 最终的结果与按的顺序无关 因为2,所以可以人为地规定比较合理的顺序. 现在以每一行为顺 ...

  8. [NOIP2015 提高组] 运输计划题解

    题目链接:P2680 [NOIP2015 提高组] 运输计划 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 看了好长时间题解才终于懂的,有关lca和二分答案的题解解释的不详细,一时 ...

  9. Odoo14 ir.actions.act_window

    xml声明 1 <record id="res_company_user_action" model="ir.actions.act_window"> ...

  10. 运行 vue 项目时报错

    INFO Starting development server... ERROR Error: C - D:\T32890\Desktop\my-project\node_modules\@vue\ ...