KindEditor - 富文本編輯器 - 使用+上傳圖片

時間 2019-11-26

標籤 kindeditor 文本編輯器使用上傳圖片简体版

原文原文鏈接

代碼高亮：http://www.cnblogs.com/KTblog/p/5205214.htmlphp

效果：css

項目結構：html

Extend：存放各類擴展
BlogAction.class.php：博文模塊
addBlog.html:添加博文頁面

Html代碼：jquery

只是用一個核心文件也可，也能夠加入其餘js文件，好比語言包，擴展包。json

addBlog.html編輯器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>添加博文</title>
    <link rel="stylesheet" href="__PUBLIC__/Css/Public.css" />
</head>
<body>
    <table class="table">
     
         //代碼省略......
　　　　　//代碼省略......
　　　　　//代碼省略......
     
        <tr>
            <td colspan="2" align="center">
                <!-- KindEditor編輯器 Begin -->
                <textarea name="content" style="width:700px;height:200px;visibility:hidden;"></textarea>
                <!-- KindEditor編輯器 End -->
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <!-- <input type="text" value="保存提交" /> -->
                <a href="" id="submit">提交</a>
            </td>
        </tr>
    </table>


    <!-- JQuery CDN Begin -->
    <script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
    <!-- JQuery End -->
    <!-- KindEditor編輯器JS Begin -->
    <script charset="utf-8" src="__EXTEND__/KindEditor/kindeditor.js"></script>
    <!-- KindEditor編輯器JS End -->
    <!-- 調用js Begin -->
    <script>
        $(function () {
            //初始化編輯器
            var ed = null;
            KindEditor.ready(function(K) {
　　　　　　　　　//上傳操做
                ed = K.create('textarea[name="content"]', {
                    uploadJson : '../Blog/upload',//post提交圖片的地址，在後臺按照往常的上傳函數接受便可。
                });
            });

            //提交事件
            $('#submit').click(function() {
                var content = ed.html();//獲取編輯器內容
                alert(content);
            });
        });
    </script>
    <!-- 調用js End -->

</body>
</html>

PHP後臺：函數

此處使用了ThinkPHP的MVC模式搭建項目：
因此傳遞到這個路徑：../Blog/upload,其中 ../ 表明文件所在位置其上的全部目錄結構。文件所在目錄，看頂部圖片。
上傳成功或失敗，按照註釋所給的json格式傳遞會前臺便可。
能夠使用加蓋水印功能

BlogAction.class.php->upload()post

/**
 * 處理上傳圖片
 * @return [type] [description]
 */
Public function upload() {
    //上傳文件
    import('ORG.Net.UploadFile');
    //加蓋水印
    import('ORG.Util.Image');

    $upload = new UploadFile();
    $upload->savePath = './App/Uploads/';
    $upload->autoSub = true;
    $upload->subType = 'date';
    $upload->dateFormat = 'Ymd';
    
    // 返回值：
    // //成功時
    // {
    //         "error" : 0,
    //         "url" : "http://www.example.com/path/to/file.ext"
    // }
    // //失敗時
    // {
    //         "error" : 1,
    //         "message" : "錯誤信息"
    // }
    if ( !$upload->upload() ) {
        echo json_encode(array('error'=>1, $upload->getErrorMsg()));
    } else {
        $UplaodFileInfo = $upload->getUploadFileInfo();
        $imagePath = '/App/Uploads/' . $UplaodFileInfo[0]['savename'];

        //加蓋水印
        //地址前面要使用  ./  當前路徑
        Image::water('.' . $imagePath, './App/Data/logo.gif');

        echo json_encode(array('error'=>0, 'url'=>$imagePath));
    }

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。