1. 程式人生 > >thinkphp引入百度編輯器

thinkphp引入百度編輯器

ueditor直接百度搜索下載就可以了,下載將解壓之後的檔案拷貝到你要存放這個工具的地址。

前端頁面設定:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--編輯器主體-->
        <textarea name="info" id="info" style="width:1024px;height:500px;"></textarea>
</body>
<!--jquery檔案-->
<script type="text/javascript" src="{$smarty.const.JS}/jquery.min.js"></script>
<!--百度編輯器檔案-->
<script type="text/javascript" charset="utf-8" src="{$smarty.const.__ROOT__}/Application/Tools/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="{$smarty.const.__ROOT__}/Application/Tools/ueditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8">
    window.UEDITOR_HOME_URL = "{$smarty.const.__ROOT__}/Application/Tools/ueditor/";
    $(document).ready(function () {
        UE.getEditor('info', {
            initialFrameHeight: 500,
            initialFrameWidth: 1050,
            serverUrl: "{$smarty.const.__CONTROLLER__}/save"
        });
    });
</script>
</html>

這裡UE.getEditor 中的 info 就是 textarea的id名稱,其中 serverUrl 就是重寫了Ueditor上傳的地址,預設是呼叫 ueditor元件的 controller.php 去上傳的。

後端處理檔案:

這裡可以參考ueditor中php目錄下的action_upload.php進行重寫上傳方法。

    public function save(){
        $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':
                $upload = new \Think\Upload();
                $upload->maxSize=3145728;
                $upload->rootPath='./Public/Upload/';
                $upload->exts=array('jpg','gif','png','jpeg');
                $info=$upload->upload();
                if(!$info){
                    $result=json_encode(array(
                        'state'=>$upload->getError()
                    ));
                }else{
                    $url=__ROOT__."/Public/Upload/".$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;

            /* 列出圖片 */
            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"])) {
            if (preg_match("/^[\w_]+$/", $_GET["callback"])) {
                echo htmlspecialchars($_GET["callback"]) . '(' . $result . ')';
            } else {
                echo json_encode(array(
                    'state'=> 'callback引數不合法'
                ));
            }
        } else {
            echo $result;
        }
    }

如果出現圖片無法新增,顯示無法建立目錄,確認一下自己目錄的設定是否正確

另外,如果提示返回的資料格式錯誤,可以看一下自己是不是開了

' SHOW_PAGE_TRACE '       => true, // 使得網頁底部顯示跟蹤資訊