1. 程式人生 > >PHP接入umeditor(百度富文字編輯器)

PHP接入umeditor(百度富文字編輯器)

百度官網上下載 umeditor 簡版的富文字編輯器(這裡)

<!DOCTYPE HTML>
<html>
<head>
    <title>UMEDITOR 完整demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="<?= BASEURL ?>umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="<?= BASEURL ?>umeditor/third-party/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?= BASEURL ?>umeditor/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?= BASEURL ?>umeditor/umeditor.min.js"></script>
    <script type="text/javascript" src="<?= BASEURL ?>umeditor/lang/zh-cn/zh-cn.js"></script>
    
</head>
<body>
<!--style給定寬度可以影響編輯器的最終寬度-->
<script type="text/plain" id="myEditor">
    <p>這裡可以寫一些輸入提示</p>
</script>
    <button class="btn" onclick="getContent()">獲得內容</button> 
    <button class="btn" onclick="setContent('1234')">寫入內容</button> 
    <button class="btn" onclick="hasContent()">是否有內容</button> 
<script type="text/javascript">
    //例項化編輯器
    // window.UMEDITOR_HOME_URL = "";
    var um = UM.getEditor('myEditor',
    {
        initialContent:'歡迎使用UMEDITOR!',
        initialFrameWidth:600,
        initialFrameHeight:240,
        imageUrl:"<?= BASEURL.'path/to/uploadimage' ?>", //處理圖片上傳的介面
        imagePath:"", //路徑字首
        imageFieldName:"upfile" //上傳圖片的表單的name
    });
    
    function getContent() {
        var arr = [];
        arr.push(UM.getEditor('myEditor').getContent());
        alert(arr.join("\n"));
    }
    
    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('歡迎使用umeditor')方法可以設定編輯器的內容");
        UM.getEditor('myEditor').setContent('歡迎使用umeditor', isAppendTo);
        alert(arr.join("\n"));
    }
    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判斷編輯器裡是否有內容");
        arr.push("判斷結果為:");
        arr.push(UM.getEditor('myEditor').hasContents());
        alert(arr.join("\n"));
    }
    
</script>
</body>
</html>
//富文字編輯器上傳功能
    public function umeditor_upimage()
    {
        $callback = $this->G('callback');

        $info = $this->getLib('QiNiu')->upImage('upfile', 'umeditor');
        $r = array(
            "originalName" => $info['file_name'],
            "name" => $info['qiniu_name'],
            "url" => $info['qiniu_url'],//不能少
            "size" => $info['size'],
            "type" => $info['extension'],
            "state" => 'SUCCESS' //不能少
        );
        if($callback) {
            echo '<script>'.$callback.'('.json_encode($r).')</script>';
        } else {
            echo json_encode($r);
        }
    }