Thinkphp整合最新Ueditor编辑器

时间 2019-11-07

原文原文链接

说到最新的富文本编辑器的确很多(ckeditor、fkeditor、ueditor),这些富文本编辑器若是单独使用基本上很方便，不须要作额外的配置，只要把官方的插件下载下来放到一个web容器中，看看插件中提供的 index.html 里的代码就明白应该怎么调用了。由于富文本编辑器会常常涉及到文件、图片、视频资源的上传，若是自己所用到的框架或者是项目自己就有一个模块是专门来处理这一起的，对一些资源须要作特殊处理的，例如水印处理，对图片的大小处理(原图、缩略图)，那么就设计到把富文本编辑器与你现有的上传模块结合起起来(富文本编辑器都有本身的上传模块)。这里值得一提的是ueditor 这个富文本编辑器，各个版本之间的差别比较大(1.2+ 、1.3+、1.4+)，致使与现有的上传模块结合也存在差别。javascript

这里笔者就采用最新版的ThinkPHP 与最新的百度Ueditor 作整合。php

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

根据本身的需求下载不一样的版本，这里采用的是1.4.4PHP utf8版本的。前端

Thinkphp 这里就不用说了，直接去tp官网下载最新的。java

步骤：web

前端部分：thinkphp

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

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

其次就是到你须要加载富文本编辑器的地方，作一些初始化(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 = "__ROOT__/Public/Ueditor/";
    $(document).ready(function () {
      UE.getEditor('test_ue', {
      initialFrameHeight: 500,
      initialFrameWidth: 1100,
      serverUrl: "{:U(MODULE_NAME.'/Index/testUe')}"
    });
  });
    
    </script>    
</head>
<body>
 <textarea name="test_ue" id="test_ue" style="width:1024px;height:500px;"></textarea>
</body>
</html>

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

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

后端部分：

这里是一个demo，因此咱们就在后端的 IndexController中的testUe函数中处理。这里这得注意的是，咱们须要看看Ueditor 自己是怎么处理上传的，代码在Ueidtor/php/controller.php ,这里咱们须要把这里面的代码拷贝到 test_Ue函数中作一些小的处理，源文件代码以下：

<?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 testUe()
    {
        $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->exts = array('jpg', 'gif', 'png', 'jpeg');
                $info = $upload->upload();
                if (!$info) {
                    $result = json_encode(array(
                        'state' => $upload->getError(),
                    ));
                } else {
               $url = __ROOT__ . "/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” 这个目录，默认在项目的根目录下，若是你是在Linux系统上测试，须要确认的是你的apache对网站的根目录有些的权限，

那么它会自动建立，此外须要你手动建立。

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

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

2.须要修改的是上面代码中 url 的连接地址，应该修改为你资源服务器的地址，确保能够正确引用你刚才上传的附件。

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

到此完毕！