Thinkphp整合最新Ueditor编辑器

最新推荐文章于 2024-04-04 09:33:35 发布

大胡子码农

最新推荐文章于 2024-04-04 09:33:35 发布

阅读量642

点赞数

分类专栏： Jacascript 文章标签：编辑器前端 javascript

本文链接：https://blog.csdn.net/cherrycmd/article/details/123001069

版权

Jacascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

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

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

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

步骤：

前端部分：

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

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

其次就是到你需要加载富文本编辑器的地方，做一些初始化(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，仅供参考。

到此完毕！