Thinkphp3.2.3整合最新百度Ueditor1.4.3编辑器

最新推荐文章于 2023-10-14 20:50:26 发布

lcw2007101

最新推荐文章于 2023-10-14 20:50:26 发布

阅读量9.7k

点赞数 2

分类专栏： Thinkphp 文章标签： Thinkphp整合百度Ueditor编

Thinkphp 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先访问百度Ueditor的官方地址：下载列表

根据自己的需求下载不同的版本，这里采用的是1.4.3PHP utf8版本的。

步骤：

前端部分：

把下载下来编辑器重新命名例如 ueditor ,并放到项目的根目录(建议你在根目录新建一个文件件或者是把它放到项目的Public目录下)，这个根据个人对网站目录

的要求而决定，笔者是放在 Public 目录下的

其次就是到你的View视图文件夹下的视图页面加载编辑器，做一些初始化(1.引用富文本编辑器所需要的js文件 2.初始化插件)，代码如下：

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Demo</title>
        <!-- JQuery 这里自己引用 -->
    <js file="__ROOT__/Public/Ueditor/ueditor.config.js"/>
    <js file="__ROOT__/Public/Ueditor/ueditor.all.min.js"/>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <js file="__ROOT__/Public/Ueditor/lang/zh-cn/zh-cn.js"/>
    <script type="text/javascript" charset="utf-8">
    window.UEDITOR_HOME_URL = "__PUBLIC__/Ueditor/";
    $(document).ready(function () {
      UE.getEditor('info', {
      initialFrameHeight: 500,
      initialFrameWidth: 1100,
      serverUrl: "{:U(MODULE_NAME.'/Index/save_info')}"
    });
  });
    
    </script>    
</head>
<body>
 <textarea name="info" id="info" style="width:1024px;height:500px;"></textarea>
</body>
</html>

这里UE.getEditor 中的 info 就是 textarea的id名称，其中 serverUrl 就是重写了Ueditor上传的地址，默认是调用 ueditor组件的 controller.php 去上传的。

这里前面的初始化部分已经完成了，接下来看看tp后端怎么处理编辑器的请求的。

后端部分：

这里是一个demo，所以我们就在后端的 IndexController中的aa函数中处理。这里这得注意的是，我们需要看看Ueditor 本身是怎么处理上传的，代码在Ueidtor/php/controller.php ,这里我们需要把这里面的代码拷贝到save_info函数中做一些小的处理，源文件代码如下：

<?php
//header('Access-Control-Allow-Origin: http://*.baidu.com'); //设置http://*.baidu.com允许跨域访问
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("config.json")), true);
$action = $_GET['action'];

switch ($action) {
    case 'config':
        $result =  json_encode($CONFIG);
        break;

    /* 上传图片 */
    case 'uploadimage':
    /* 上传涂鸦 */
    case 'uploadscrawl':
    /* 上传视频 */
    case 'uploadvideo':
    /* 上传文件 */
    case 'uploadfile':
        $result = include("action_upload.php");
        break;

    /* 列出图片 */
    case 'listimage':
        $result = include("action_list.php");
        break;
    /* 列出文件 */
    case 'listfile':
        $result = include("action_list.php");
        break;

    /* 抓取远程文件 */
    case 'catchimage':
        $result = include("action_crawler.php");
        break;

    default:
        $result = json_encode(array(
            'state'=> '请求地址出错'
        ));
        break;
}

/* 输出结果 */
if (isset($_GET["callback"])) {
    echo $_GET["callback"] . '(' . $result . ')';
} else {
    echo $result;
}

主要处理3个部分就ok了， 1.修改 config.json的引用路径，确保能被正确引用 2.上传的代码采用 thinkphp 提供的上传 3.构造ueditor编辑器的返回值

其中第 3 个部分可以参考与controll.php 并列的一个文件action_upload.php 文件，里面写的有返回格式要求：

/**
 * 得到上传文件所对应的各个参数,数组结构
 * array(
 *     "state" => "",          //上传状态，上传成功时必须返回"SUCCESS"
 *     "url" => "",            //返回的地址
 *     "title" => "",          //新文件名
 *     "original" => "",       //原始文件名
 *     "type" => ""            //文件类型
 *     "size" => "",           //文件大小
 * )
 */

所以综合上面的步骤，整理后的代码如下：

public function save_info(){
		$ueditor_config = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents("./Public/Ueditor/php/config.json")), true);
		$action = $_GET['action'];
		switch ($action) {
			case 'config':
				$result = json_encode($ueditor_config);
				break;
				/* 上传图片 */
			case 'uploadimage':
				/* 上传涂鸦 */
			case 'uploadscrawl':
				/* 上传视频 */
			case 'uploadvideo':
				/* 上传文件 */
			case 'uploadfile':
				$upload = new \Think\Upload();
				$upload->maxSize = 3145728;
				$upload->rootPath = './Public/Uploads/';
				$upload->exts = array('jpg', 'gif', 'png', 'jpeg');
				$info = $upload->upload();
				if (!$info) {
					$result = json_encode(array(
							'state' => $upload->getError(),
					));
				} else {
					$url = __ROOT__ . "/Public/Uploads/" . $info["upfile"]["savepath"] . $info["upfile"]['savename'];
					$result = json_encode(array(
							'url' => $url,
							'title' => htmlspecialchars($_POST['pictitle'], ENT_QUOTES),
							'original' => $info["upfile"]['name'],
							'state' => 'SUCCESS'
					));
				}
				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;
		}
	}

Thinkphp 默认的上传目录 “Uploads” 这个目录，默认在项目的根目录下；这里上传的文件是放在Public/Uploads文件下，如果你是在Linux系统上测试，需要确认的是你的apache对网站的根目录有些的权限，

那么它会自动创建，此外需要你手动创建。

另外对于一些站点来说，上传至uploads 目录只是临时的，最终是需要讲这些附件上传至资源服务器。这种情况下你上传完的图片在编辑器中显示的引用地址应该是从资源服务器引用过来的。这里需要修改的只有2处：

1.在上传至uploads 成功之后，就调用上传至你的资源服务器的代码

2.需要修改的是上面代码中 url 的链接地址，应该修改成你资源服务器的地址，确保可以正确引用你刚才上传的附件。

以上的代码只是一个 demo，仅供参考。

到此完毕！

lcw2007101

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
Thinkphp3.2.3整合最新百度Ueditor1.4.3编辑器

首先访问百度Ueditor的官方地址：下载列表根据自己的需求下载不同的版本，这里采用的是1.4.3PHP utf8版本的。步骤：前端部分：把下载下来编辑器重新命名例如 ueditor ,并放到项目的根目录(建议你在根目录新建一个文件件或者是把它放到项目的Public目录下)，这个根据个人对网站目录的要求而决定，笔者是放在 Public 目录下的其次就是到你的Vie
复制链接

扫一扫