5. 編輯器及上傳縮圖

一、完成登入機制

先檢查UniForm Server是否有啟用php_openssl.dll（PHP→Edit Basic and Modules→PHP Modules Enable/Disable）

先處理寄信問題，修改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 ''

修改includes/mailsender.php的20行為：
```
$mail->CharSet = "UTF-8";
```

修改globalcon.php把其中第4行中的 6 + 刪除，最後會像這樣：

$signin_url = substr($base_url . $_SERVER['PHP_SELF'], 0, -(strlen(basename($_SERVER['PHP_SELF']))));

分別修改 signup.php、verifyuser.php、main_login.php將之套用樣板檔，若裡頭有任何地方有login/路徑的，請刪除之。
記得修改選單nav.tpl，並修改資料庫架構，以便紀錄發文者。
完整範例

二、修改管理頁面樣板

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

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

下載https://ckeditor.com/ckeditor-4/download/完整版Full Package

編輯表單樣板檔並貼入以下語法：

<script src="ckeditor/ckeditor.js"></script>
<textarea  name="content" id="content"></textarea>
<script>
    CKEDITOR.replace('content');
</script>

使用內建的設定工具列：localhost/reporter/ckeditor/samples/toolbarconfigurator/ ，將結果複製到 config.js 即可。

四、安裝elfinder檔案管理

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

五、上傳圖片

若表單中有file元件，其表單編碼一定要加上：
```
enctype="multipart/form-data"
```
記得建立一個資料夾，例如：uploads（linux下權限記得設定為777）
每上傳一個附檔（假設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']：和該檔案上傳相關的錯誤代碼。
上傳的步驟：送出上傳→檔案會暫時放到tmp中→程式要搬移該檔到指定的位置。

搬移上傳檔方法：

move_uploaded_file(暫存檔 , 新路徑檔名)

取得附檔名的方法：

$ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);

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

用法：

<img src="http://lorempixel.com/400/300/">

七、上傳工具

https://www.verot.net/php_class_upload.htm下載解壓，把class.upload.php及lang目錄放到reporter目錄中。

建立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 攻擊

官網：http://htmlpurifier.org，

下載解壓縮並把library複製到reporter下，建議改名為HTMLPurifier，接著在讀取單一篇文章的函數中加入：

require_once 'HTMLPurifier/HTMLPurifier.auto.php';
$config = HTMLPurifier_Config::createDefault();
$purifier = new HTMLPurifier($config);
$data['content'] = $purifier->purify($data['content']);

九、加入Markdown編輯器

官網：http://pandao.github.io/editor.md，手冊：http://markdown.tw/

下載解壓並改名為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>

原先輸入框部份改為

<div id="editormd">
    <textarea style="display:none;" name="content" id="content"></textarea>
</div>

在editor下建立uploads資料夾，並將editor/examples下的php複製到editor下
修改editor/php/upload.php，將 new EditorMdUploader();最後一個參數從false改為1，以便讓程式自動產生隨機檔名。

十、將Markdown轉為HTML

在顯示單一文章的樣板檔前加入：

<link rel="stylesheet" href="editor/css/editormd.preview.css" />

原本的內容區改為：

<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>

4-13 templtes/signup.tpl