thinkphp 5.1 使用 ueditor踩过的坑

最新推荐文章于 2024-04-04 09:33:35 发布
最新推荐文章于 2024-04-04 09:33:35 发布
阅读量949 收藏
点赞数
分类专栏： php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35306993/article/details/102687006
版权

一、ueditor简介
UEditor是百度的开源项目，一个用js开发的在线富文本编辑器。

下载地址：

http://ueditor.baidu.com/website/download.html

可以根据自己项目的编程语言选择相应的版本，这里我选择php版本

准备工作：

1、说明：我使用的编程语言是php，所用框架是thinkphp5.0.20，我的项目目录结构，没啥特别的：

2、下载好 ueditor1_4_3_3-utf8-php.zip ，解压，将utf8-php文件夹重命名为ueditor，并将其复制到项目目录下的

public/static/js/下即可

二、ueditor的使用
第一步：引入ueditor的js文件

<script type="text/javascript" src="__JS__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__JS__/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="__JS__/ueditor/lang/zh-cn/zh-cn.js"></script>

文件说明：

ueditor.config.js 这是配置文件

ueditor.all.js 这是主要的文件

【注意事项】需要注意两个文件的引入先后顺序，因为ueditor.all.js需要依赖于ueditor.config.js，所以要先引入

ueditor.config.js文件，再引入ueditor.all.js

第二步：

<div class="container">
		<form method="post" autocomplete="off"/>
		<table class="table table-bordered">
			<tr>
				<td style="width:150px">文章标题</td>
				<td><input type="text" class="form-control" style="width:900px" /></td>
			</tr>
			<tr>
				<td>文章内容</td >
				<td>
					<textarea name="article_content" id="article_content"></textarea>
				</td>
			</tr>
			<tr>
				<td style="width:150px"></td>
				<td><input type="submit" value="提交"/></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
			</tr>
		</table>
		</form>
	</div>
	
	<script type="text/javascript">
		var url="{:url('Ueditor/index')}";
		var ue = UE.getEditor('article_content',{
			serverUrl :url	
		});
	</script>

【备注】serverUrl选项是处理上传的控制器

第三步：编写Ueditor.php控制器

<?php
namespace app\home\controller;
use think\Controller;
use think\Image;
use think\Request;
 
class Ueditor extends Controller{
	public function index(){
        //header('Access-Control-Allow-Origin: http://www.baidu.com'); //设置http://www.baidu.com允许跨域访问
        //header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With'); //设置允许的跨域header
        date_default_timezone_set("Asia/chongqing");
        error_reporting(E_ERROR);
        header("Content-Type: text/html; charset=utf-8");
 
        $CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents("./static/js/ueditor/php/config.json")), true);
        $action = $_GET['action'];
 
        switch ($action) {
            case 'config':
                $result =  json_encode($CONFIG);
                break;
            /* 上传图片 */
            case 'uploadimage':
		        $fieldName = $CONFIG['imageFieldName'];
		        $result = $this->upFile($fieldName);
		        break;
            /* 上传涂鸦 */
            case 'uploadscrawl':
		        $config = array(
		            "pathFormat" => $CONFIG['scrawlPathFormat'],
		            "maxSize" => $CONFIG['scrawlMaxSize'],
		            "allowFiles" => $CONFIG['scrawlAllowFiles'],
		            "oriName" => "scrawl.png"
		        );
		        $fieldName = $CONFIG['scrawlFieldName'];
		        $base64 = "base64";
		        $result = $this->upBase64($config,$fieldName);
		        break;
            /* 上传视频 */
            case 'uploadvideo':
		        $fieldName = $CONFIG['videoFieldName'];
		        $result = $this->upFile($fieldName);
		        break;
            /* 上传文件 */
            case 'uploadfile':
		        $fieldName = $CONFIG['fileFieldName'];
		        $result = $this->upFile($fieldName);
                break;
            /* 列出图片 */
            case 'listimage':
			    $allowFiles = $CONFIG['imageManagerAllowFiles'];
			    $listSize = $CONFIG['imageManagerListSize'];
			    $path = $CONFIG['imageManagerListPath'];
			    $get =$_GET;
			    $result =$this->fileList($allowFiles,$listSize,$get);
                break;
            /* 列出文件 */
            case 'listfile':
			    $allowFiles = $CONFIG['fileManagerAllowFiles'];
			    $listSize = $CONFIG['fileManagerListSize'];
			    $path = $CONFIG['fileManagerListPath'];
			    $get = $_GET;
			    $result = $this->fileList($allowFiles,$listSize,$get);
                break;
            /* 抓取远程文件 */
            case 'catchimage':
		    	$config = array(
			        "pathFormat" => $CONFIG['catcherPathFormat'],
			        "maxSize" => $CONFIG['catcherMaxSize'],
			        "allowFiles" => $CONFIG['catcherAllowFiles'],
			        "oriName" => "remote.png"
			    );
			    $fieldName = $CONFIG['catcherFieldName'];
			    /* 抓取远程图片 */
			    $list = array();
			    isset($_POST[$fieldName]) ? $source = $_POST[$fieldName] : $source = $_GET[$fieldName];
				
			    foreach($source as $imgUrl){
			        $info = json_decode($this->saveRemote($config,$imgUrl),true);
			        array_push($list, array(
			            "state" => $info["state"],
			            "url" => $info["url"],
			            "size" => $info["size"],
			            "title" => htmlspecialchars($info["title"]),
			            "original" => htmlspecialchars($info["original"]),
			            "source" => htmlspecialchars($imgUrl)
			        ));
			    }
 
			    $result = json_encode(array(
			        'state' => count($list) ? 'SUCCESS':'ERROR',
			        'list' => $list
			    ));
                break;
            default:
                $result = json_encode(array(
                    'state' => '请求地址出错'
                ));
                break;
        }
 
        /* 输出结果 */
        if(isset($_GET["callback"])){
            if(preg_match("/^[\w_]+$/", $_GET["callback"])){
                echo htmlspecialchars($_GET["callback"]).'('.$result.')';
            }else{
                echo json_encode(array(
                    'state' => 'callback参数不合法'
                ));
            }
        }else{
            echo $result;
        }
	}
	
	//上传文件
	private function upFile($fieldName){
		$file = request()->file($fieldName);
		$info = $file->move('uploads');
		if($info){//上传成功
			$fname='/uploads/'.str_replace('\\','/',$info->getSaveName());
			
			$imgArr = explode(',', 'jpg,gif,png,jpeg,bmp,ttf,tif');
			$imgExt= strtolower($info->getExtension());
			
			$data=array(
				'state' => 'SUCCESS',
				'url' => $fname,
				'title' => $info->getFilename(),
				'original' => $info->getFilename(),
				'type' => '.' . $info->getExtension(),
				'size' => $info->getSize(),
			);
		}else{
			$data=array(
			    'state' => $info->getError(),
			);
		}
		return json_encode($data);
	}
 
    //列出图片
	private function fileList($allowFiles,$listSize,$get){
		$dirname = './public/uploads/';
		$allowFiles = substr(str_replace(".","|",join("",$allowFiles)),1);
 
		/* 获取参数 */
		$size = isset($get['size']) ? htmlspecialchars($get['size']) : $listSize;
		$start = isset($get['start']) ? htmlspecialchars($get['start']) : 0;
		$end = $start + $size;
 
		/* 获取文件列表 */
		$path = $dirname;
		$files = $this->getFiles($path,$allowFiles);
		if(!count($files)){
		    return json_encode(array(
		        "state" => "no match file",
		        "list" => array(),
		        "start" => $start,
		        "total" => count($files)
		    ));
		}
 
		/* 获取指定范围的列表 */
		$len = count($files);
		for($i = min($end, $len) - 1, $list = array(); $i < $len && $i >= 0 && $i >= $start; $i--){
		    $list[] = $files[$i];
		}
 
		/* 返回数据 */
		$result = json_encode(array(
		    "state" => "SUCCESS",
		    "list" => $list,
		    "start" => $start,
		    "total" => count($files)
		));
 
		return $result;
	}
 
   	/*
	 * 遍历获取目录下的指定类型的文件
	 * @param $path
	 * @param array $files
	 * @return array
	*/
    private function getFiles($path,$allowFiles,&$files = array()){
	    if(!is_dir($path)) return null;
	    if(substr($path,strlen($path)-1) != '/') $path .= '/';
	    $handle = opendir($path);
			
	    while(false !== ($file = readdir($handle))){
	        if($file != '.' && $file != '..'){
	            $path2 = $path.$file;
	            if(is_dir($path2)){
	                $this->getFiles($path2,$allowFiles,$files);
	            }else{
		            if(preg_match("/\.(".$allowFiles.")$/i",$file)){
		                $files[] = array(
		                    'url' => substr($path2,1),
		                    'mtime' => filemtime($path2)
		                );
		            }
	            }
	        }
	    }
		
	    return $files;
    }
 
    //抓取远程图片
	private function saveRemote($config,$fieldName){
	    $imgUrl = htmlspecialchars($fieldName);
	    $imgUrl = str_replace("&","&",$imgUrl);
 
	    //http开头验证
	    if(strpos($imgUrl,"http") !== 0){
	        $data=array(
		        'state' => '链接不是http链接',
		    );
	        return json_encode($data);
	    }
	    //获取请求头并检测死链
	    $heads = get_headers($imgUrl);
	    if(!(stristr($heads[0],"200") && stristr($heads[0],"OK"))){
	        $data=array(
		        'state' => '链接不可用',
		    );
	        return json_encode($data);
	    }
	    //格式验证(扩展名验证和Content-Type验证)
	    $fileType = strtolower(strrchr($imgUrl,'.'));
	    if(!in_array($fileType,$config['allowFiles']) || stristr($heads['Content-Type'],"image")){
	        $data=array(
		        'state' => '链接contentType不正确',
		    );
	        return json_encode($data);
	    }
 
	    //打开输出缓冲区并获取远程图片
	    ob_start();
	    $context = stream_context_create(
	        array('http' => array(
	            'follow_location' => false // don't follow redirects
	        ))
	    );
	    readfile($imgUrl,false,$context);
	    $img = ob_get_contents();
	    ob_end_clean();
	    preg_match("/[\/]([^\/]*)[\.]?[^\.\/]*$/",$imgUrl,$m);
 
	    $dirname = './public/uploads/remote/';
	    $file['oriName'] = $m ? $m[1] : "";
	    $file['filesize'] = strlen($img);
	    $file['ext'] = strtolower(strrchr($config['oriName'],'.'));
	    $file['name'] = uniqid().$file['ext'];
	    $file['fullName'] = $dirname.$file['name'];
	    $fullName = $file['fullName'];
 
	    //检查文件大小是否超出限制
	    if($file['filesize'] >= ($config["maxSize"])){
  		    $data=array(
			    'state' => '文件大小超出网站限制',
		    );
		    return json_encode($data);
	    }
 
	    //创建目录失败
	    if(!file_exists($dirname) && !mkdir($dirname,0777,true)){
  		    $data=array(
			    'state' => '目录创建失败',
		    );
		    return json_encode($data);
	    }else if(!is_writeable($dirname)){
  		    $data=array(
			    'state' => '目录没有写权限',
		    );
		    return json_encode($data);
	    }
 
	    //移动文件
	    if(!(file_put_contents($fullName, $img) && file_exists($fullName))){ //移动失败
  		    $data=array(
			    'state' => '写入文件内容错误',
		    );
		    return json_encode($data);
	    }else{ //移动成功
	        $data=array(
			    'state' => 'SUCCESS',
			    'url' => substr($file['fullName'],1),
			    'title' => $file['name'],
			    'original' => $file['oriName'],
			    'type' => $file['ext'],
			    'size' => $file['filesize'],
		    );
	    }
		
	    return json_encode($data);
	}
 
    /*
	 * 处理base64编码的图片上传
	 * 例如：涂鸦图片上传
	*/
	private function upBase64($config,$fieldName){
	    $base64Data = $_POST[$fieldName];
	    $img = base64_decode($base64Data);
 
	    $dirname = './public/uploads/scrawl/';
	    $file['filesize'] = strlen($img);
	    $file['oriName'] = $config['oriName'];
	    $file['ext'] = strtolower(strrchr($config['oriName'],'.'));
	    $file['name'] = uniqid().$file['ext'];
	    $file['fullName'] = $dirname.$file['name'];
	    $fullName = $file['fullName'];
 
 	    //检查文件大小是否超出限制
	    if($file['filesize'] >= ($config["maxSize"])){
  		    $data=array(
			    'state' => '文件大小超出网站限制',
		    );
		    return json_encode($data);
	    }
 
	    //创建目录失败
	    if(!file_exists($dirname) && !mkdir($dirname,0777,true)){
	        $data=array(
			    'state' => '目录创建失败',
		    );
		    return json_encode($data);
	    }else if(!is_writeable($dirname)){
	        $data=array(
			    'state' => '目录没有写权限',
		    );
		    return json_encode($data);
	    }
 
	    //移动文件
	    if(!(file_put_contents($fullName, $img) && file_exists($fullName))){ //移动失败
            $data=array(
		        'state' => '写入文件内容错误',
		    );
	    }else{ //移动成功	       
	        $data=array(
			    'state' => 'SUCCESS',
			    'url' => substr($file['fullName'],1),
			    'title' => $file['name'],
			    'original' => $file['oriName'],
			    'type' => $file['ext'],
			    'size' => $file['filesize'],
		    );
	    }
		
	    return json_encode($data);
	}
	
}

【注意事项】

1、config.json的路径（./ 默是指public目录）

2、图片的保存路径（参照官网手册配置）
3、 运行测试
配置好服务器之后，可以测试一下 php 代码是否正确执行，在浏览器打开 /home/ueditor?action=config 对应的路径，看看是否有下面的返回值。

{
state: “请求地址出错”
}
再访问 /home/ueditor?action=config是否正常返回了json格式的后端配置内容，格式大致如下。

{
“imageUrl”: “http://localhost/ueditor/php/controller.php?action=uploadimage”,
“imagePath”: “/ueditor/php/”,
“imageFieldName”: “upfile”,
“imageMaxSize”: 2048,
“imageAllowFiles”: [".png", “.jpg”, “.jpeg”, “.gif”, “.bmp”]
“其他配置项…”: “其他配置值…”
}
如果以上这两个请求出错，出现400、500等错误，编辑器上传相关的功能将不能正常使用。

注意！注意！注意！！！重要事情说三遍

还要注意一点：就是在使用ueditor时，thinkphp一定一定要将app_debug关闭，app_trace关闭 否则无法上传，浏览器控制台一直提示’app_debug’=>false,‘app_trace’=>false,
在这里插入图片描述

段大帅
关注
专栏目录
Thinkphp5.1对接ueditor（自定义上传接口）
夏已微凉、
08-31 762
ueditor是强大，但是目前来说是没维护了，这里只是拿来练一下手。
Thinkphp5.1百度ueditor编辑器上传到阿里云oss
ORIENT_one的博客
09-01 445
打开在ueditor下的php文件夹下的Uploader.class.php文件 把自己aliyun-oss文件引入（注意这一步一定要反复测试是否引入正确） 然后注释掉upFile下的“创建目录失败”和“移动文件” 然后加入 $ossconfig = [ 'KeyId' => '', //您的Access Key ID 'KeySecret' => '', //您的Access Key Secret
thinkphp5.1下ueditor整合七牛云存储.zip
06-26
基于thinkphp5.1整合ueditor上传文件到七牛云 ，只需要基本的配置就可以使用
ThinkPHP下使用Ueditor
热门推荐
攀爬蜗牛-dutycode.com
02-25 1万+
相信很多人现在还在用着FCkeditor，以前我也在用，可是后来发现百度的Ueditor之后，发现，Ueditor比Fckeditor更好看，操作性上也比Fckeditor好多了，所以还是尝试着使用ueditor，但是在ThinkPHP框架下使用ueditor还是遇到了一些问题，也花费了一些时间去解决这些问题，这样，在这里写一个关于ThinkPHP下使用ueditor的教程，给需要使用的人。
Thinkphp整合最新Ueditor编辑器
weixin_30809333的博客
12-07 192
说到最新的富文本编辑器的确不少(ckeditor、fkeditor、ueditor),这些富文本编辑器如果单独使用基本上很方便，不需要做额外的配置，只要把官方的插件下载下来放到一个web容器中，看看 插件中提供的 index.html 里的代码就明白应该怎么调用了。因为富文本编辑器会经常涉及到文件、图片、视频资源的上传，如果本身所用到的框架或者是项目本身就有一个模块是专门来处理这一块儿的...
THINKPHP5.1显示UEDITOR数据
php_lovepan的博客
11-21 437
https://www.anji66.net/article/id/105.html
Thinkphp下嵌套UEditor富文本WEB编辑器
lshake的博客
09-16 3087
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码... 本文实际操作于ThinkPHP框架下，现分享与大家参考，整体流程详解如下： 第一步： 下载UEditor编译器，请到官网进行下载：http://ueditor.baidu.com/website/download.html 注：本例
ThinkPHP整合百度Ueditor图文教程
01-21
ThinkPHP整合百度Ueditor，基于黄永成老师的视频说明的 申明：最好大家都能写绝对路径的都写好绝对路径比如：window.UEDITOR_HOME_URL 他在教程里面已经说了的，我就不再次说了啊，就一笔带过，好了不废话！ 在...
TP5.1框架中百度富文本编辑器UEditor的使用
Sol的博客
08-02 3067
在实际项目开发中最常使用到的工具之一就是富文本编辑器，使用富文本编辑器可以实现所见即所得的效果，且所有富文本编辑器里的内容(包括图片，视频，音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段。当前市面上有许多可供选择的富文本编辑器，虽然百度的UEditor已在2016年即停止更新且界面风格较老，但是其属性，功能十分强大，所以仍是当前富文本编辑器里最好的选择之一。 现在就开始在ThinkPH...
ueditor utf8-php.zip
05-13
找不到ueditor.all.js以及ueditor.all.min.js文件，utf8-php 目录下包含所有必须的文件
php版ueditor配置_thinkPHP下ueditor的使用方法详解
weixin_36360255的博客
03-08 559
这篇文章主要介绍了thinkPHP下ueditor的使用方法,结合实例形式较为详细的讲述了thinkPHP下使用ueditor的具体步骤与相关技巧,需要的朋友可以参考下本文实例讲述了thinkPHP下ueditor的使用方法。分享给大家供大家参考，具体如下：2、下载对应的php版的，下载后重命名为ueditor，根据需要放到对应的项目目录中。我放的位置为Public/admin文件夹下，admin...
推荐：Ueditor-ThinkPHP - 强大的前端编辑器与后端框架的完美结合
最新发布
gitblog_00041的博客
04-04 421
推荐：Ueditor-ThinkPHP - 强大的前端编辑器与后端框架的完美结合 项目地址:https://gitcode.com/eureka101v/Ueditor-thinkphp 项目简介 Ueditor-ThinkPHP 是一个将流行的富文本编辑器 UEditor 与高效轻量级的 PHP 框架 ThinkPHP 结合的项目，旨在提供一套完整的、开箱即用的内容管理系统（CMS）解决方案。它...
thinkphp5集成Ueditor
摘星辰Li
05-16 939
1、官网下载ueditor地址： https://ueditor.baidu.com/website/download.html#ueditor 下载是UTF-8： 2、下载完后解压出来重名为ueditor，再复制到public下方 3、在view层测试代码 <!-- 加载编辑器的容器 --> <script id="container" name="cont...
ThinkPhp6框架使用富文本编辑器UEditor
weixin_51430003的博客
10-14 517
原名：ueditor1_4_3_3-utf8-php 更改后： ueditor。将文件压缩后放在指定区域，并将文件夹进行更改名称。将文件夹放置在项目中的 public中。
php做页面编辑器,最牛在线编辑器ueditor在thinkphp框架中的使用方法
weixin_32758097的博客
03-28 386
1.先来介绍一下这个ueditor编辑器:UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议，所有源代码在协议允许范围内可自由修改和使用。最近在开发程序的时候需要集成一个富文本编辑器，UEditor的UI及UE比CKEditor、KindEditor要好出不少。所以简单地对UEditor研究了一下，记录于此。2.初步了...
ueditor php使用教程,thinkPHP下ueditor的使用方法详解
weixin_39880899的博客
03-18 174
本文实例讲述了thinkPHP下ueditor的使用方法。分享给大家供大家参考，具体如下：1、首先需要下载ueditor，下载地址：http://ueditor.baidu.com/website/download.html2、下载对应的php版的，下载后重命名为ueditor，根据需要放到对应的项目目录中。我放的位置为Public/admin文件夹下，admin为后台的访问入口文件目录。3、在项...
thinkphp中的Ueditor的使用, 以及如何传递编辑器内容到后台?
weixin_34348174的博客
02-27 582
在线编辑器有很多很多, 而且大多是开源的. uediotr基于mit协议, 开源, 可以用于商业和非商业的 任意使用和修改都可以 如果两个相连接的 相邻的 元素之间 因为边框重叠 而显得中间的边框线很粗了, 那么可以设置 其中的一个元素的 某一边的 边框线为none. 其他的地方可以使用 类似 的操作 思想; line-heigh的作用? 对于 一个 行级 元素 中的文本的排版布局, 默认的排版方...
thinkphp5.1对接ueditor（自定义上传接口）
fengye002011的博客
04-05 1033
由于ueditor官方提供了 php的接口，所以很多人都是直接使用他自带的那个了，但是如果要用到thinkphp我们自己开发的上传接口，则官方没有给出更多的解决方案， 解决方法： （1）自己封装一个上传类：ueditor.php class Ueditor extends Base{ // 优先加载 protected function initialize() { parent::initialize(); $this->attachmentModel = new Attac
thinkphp +ueditor 踩坑
seehunter的专栏
06-28 309
ueditor 通过thinkphp读取配置文件时，由于打开了app_trace参数  会在ajax读取文件之后加上trace信息，导致格式不对所以使用ueditor时应该将app_trace设置为false ...
ThinkPHP 5.1 配置与升级指南
"这篇文档是关于ThinkPHP5.1框架的中文学习手册，涵盖了从基础安装到高级特性的全面教程，包括配置文件的调整、架构设计...通过这个手册，开发者可以全面掌握ThinkPHP5.1的使用，从基础到进阶，构建高效稳定的Web应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值