[1062] PHP7入門

5. 編輯器及上傳縮圖

一、 完成登入機制

  1. 先檢查UniForm Server是否有啟用php_openssl.dll（PHP→Edit Basic and Modules→PHP Modules Enable/Disable）
  2. 先處理寄信問題，修改config.php： 
    $mailServerType = 'smtp';
//IF $mailServerType = 'smtp'
$smtp_server   = 'smtp.gmail.com';
$smtp_user     = '帳號@gmail.com';
$smtp_pw       = '密碼';
$smtp_port     = 587; //465 for ssl, 587 for tls, 25 for other
$smtp_security = 'tls'; //ssl, tls or ''
  3. 修改includes/mailsender.php的20行為： 
    $mail->CharSet = "UTF-8";
  4. 修改globalcon.php把其中第4行中的 6 + 刪除，最後會像這樣： 
    $signin_url = substr($base_url . $_SERVER['PHP_SELF'], 0, -(strlen(basename($_SERVER['PHP_SELF']))));
  5. 分別修改 signup.php、verifyuser.php、main_login.php將之套用樣板檔，若裡頭有任何地方有login/路徑的，請刪除之。
  6. 記得修改選單nav.tpl，並修改資料庫架構，以便紀錄發文者。
  7. 完整範例

二、 修改管理頁面樣板

  1. 放在footer.tpl的jquery.js可移至header.tpl，以應付越來越多的套件需求。
  2. 可把隨機底圖部份的語法獨立出來，方便不同頁面套用，畢竟不是每個頁面都要大底圖。

三、 安裝Ckeditor所見即所得編輯器

  1. 下載https://ckeditor.com/ckeditor-4/download/完整版Full Package
  2. 編輯表單樣板檔並貼入以下語法： 
    <script src="ckeditor/ckeditor.js"></script>
<textarea  name="content" id="content"></textarea>
<script>
    CKEDITOR.replace('content');
</script>
  3. 使用內建的設定工具列：localhost/reporter/ckeditor/samples/toolbarconfigurator/ ，將結果複製到 config.js 即可。

四、 安裝elfinder檔案管理

  1. 下載https://studio-42.github.io/elFinder/，下載解壓並改名為elFinder
  2. 將 elFinder/elfinder.html 改名為 elFinder/elfinder_cke.html，以避免日後更新時，設定被覆蓋。
  3. 修改 ckeditor/config.js ，在最後加入以下語法，以呼叫檔案管理工具： 
    config.filebrowserBrowseUrl = 'elFinder/elfinder_cke.html';
  4. 下載https://hypweb.net/elFinder-nightly/demo/Demo/Downloads/Example/main.cke.js
  5. 修改 elFinder/elfinder_cke.html 第10行為 main.cke.js 
    <script data-main="./main.cke.js" src="略"></script>
  6. 建立 files目錄（在linux下需設為777），將 elFinder/php/connector.minimal.php-dist 另存為 elFinder/php/connector.minimal.php 即可

五、 上傳圖片

  1. 若表單中有file元件，其表單編碼一定要加上： 
    enctype="multipart/form-data"
  2.  記得建立一個資料夾，例如：uploads（linux下權限記得設定為777）
  3. 每上傳一個附檔（假設file欄位名稱為file），都會產生一組 $_FILES 超級全域變數：
    • (1) $_FILES['file']['name']：上傳檔案原始名稱。
    • (2) $_FILES['file']['type']：檔案的 MIME 類型，例如“image/gif”。
    • (3) $_FILES['file']['size']：已上傳檔案的大小，單位為bytes。
    • (4) $_FILES['file']['tmp_name']：檔案被上傳後的臨時檔案名。
    • (5) $_FILES['file']['error']：和該檔案上傳相關的錯誤代碼。
  4. 上傳的步驟：送出上傳→檔案會暫時放到tmp中→程式要搬移該檔到指定的位置。
  5. 搬移上傳檔方法： 
    move_uploaded_file(暫存檔 , 新路徑檔名)
  6. 取得附檔名的方法： 
    $ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);

六、 隨機假圖http://lorempixel.com/

  1. 用法： 
    <img src="http://lorempixel.com/400/300/">

七、 上傳工具

  1. https://www.verot.net/php_class_upload.htm下載解壓，把class.upload.php及lang目錄放到reporter目錄中。
  2. 建立uploads資料夾，並產生縮圖並轉檔： 
    require_once 'class.upload.php';
$foo = new Upload($_FILES['cover']);
if ($foo->uploaded) {
    // save uploaded image with a new name
    $foo->file_new_name_body = 'cover_' . $sn;
    $foo->image_resize       = true;
    $foo->image_convert      = png;
    $foo->image_x            = 1200;
    $foo->image_ratio_y      = true;
    $foo->Process('uploads/');
    if ($foo->processed) {
        $foo->file_new_name_body = 'thumb_' . $sn;
        $foo->image_resize       = true;
        $foo->image_convert      = png;
        $foo->image_x            = 400;
        $foo->image_ratio_y      = true;
        $foo->Process('uploads/');
    }
}

八、 用HTML Purifier阻擋 XSS 攻擊

  1. 官網：http://htmlpurifier.org，
  2. 下載解壓縮並把library複製到reporter下，建議改名為HTMLPurifier，接著在讀取單一篇文章的函數中加入： 
    require_once 'HTMLPurifier/HTMLPurifier.auto.php';
$config = HTMLPurifier_Config::createDefault();
$purifier = new HTMLPurifier($config);
$data['content'] = $purifier->purify($data['content']);

九、 加入Markdown編輯器

  1. 官網：http://pandao.github.io/editor.md，手冊：http://markdown.tw/
  2. 下載解壓並改名為editor，接著編輯表單樣板檔並貼入以下語法： 
    <link rel="stylesheet" href="editor/css/editormd.min.css" />
<script src="editor/editormd.min.js"></script>
<script src="editor/languages/zh-tw.js"></script>
<script type="text/javascript">
    $(function () {
        var editor = editormd({
            id: "editormd",
            height: 740,
            path: 'editor/lib/',
            codeFold: true,
            saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
            searchReplace: true,
            htmlDecode: "style,script,iframe|on*",            // 開啟 HTML 標籤解析
            emoji: true,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 開啟科學公式TeX語言支持，默認關閉
            flowChart: true,             // 開啟流程圖支持，默認關閉
            sequenceDiagram: true,       // 開啟時序/序列圖支持，默認關閉,
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "editor/php/upload.php"
        });
    });
</script>
  3. 原先輸入框部份改為 
    <div id="editormd">
    <textarea style="display:none;" name="content" id="content"></textarea>
</div>
  4. 在editor下建立uploads資料夾，並將editor/examples下的php複製到editor下
  5. 修改editor/php/upload.php，將 new EditorMdUploader();最後一個參數從false改為1，以便讓程式自動產生隨機檔名。

十、 將Markdown轉為HTML

  1. 在顯示單一文章的樣板檔前加入： 
    <link rel="stylesheet" href="editor/css/editormd.preview.css" />

     

  2. 原本的內容區改為： 
    <div id="article">
    <textarea id="append-test" style="display:none;">{$article.content}</textarea>
</div>
<script src="editor/lib/marked.min.js"></script>
<script src="editor/lib/prettify.min.js"></script>
<script src="editor/lib/raphael.min.js"></script>
<script src="editor/lib/underscore.min.js"></script>
<script src="editor/lib/sequence-diagram.min.js"></script>
<script src="editor/lib/flowchart.min.js"></script>
<script src="editor/lib/jquery.flowchart.min.js"></script>
<script src="editor/editormd.js"></script>
<script type="text/javascript">
    $(function () {
        var article;
        article = editormd.markdownToHTML("article", {
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
        });
    });
</script>