[PHP,Javascript]線上文字編輯器CKEditor簡易使用範例




今天來說說ckeditor ,一個Open Sourse的線上文字編輯器,可以方便終端使用者編輯要發布的文章。

首先你會需要去ckeditor.com把檔案下載回來後加入到你的檔案中,下面示範了如何建立你的編輯器,然後取得文字資料並透過PHP把資料傳送給mySQL

webNewsEditor.php:
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor</title>
        <script src="./ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <form name = 'form' action = 'webNewsEditorResult.php' method='post'>
            <input type="text" id="title" name="title" class="form-control" placeholder="文章標題" required>
            <input type="text" id="schoolSelect" name="schoolSelect" class="form-control" placeholder="學校" required>
            <textarea name="content" id="content" rows="10" cols="80"></textarea>
            <script>
                  CKEDITOR.replace( 'content', {
                    //輸入客製化條件
                    height: 450,  //設定內容編輯器高度
                    });    
            </script>
            <br>
           <input type="submit" value = '送出' >
        </form>
        <br>
    </body>
</html>

webNewsEditorResult.php:
<?php
$title = $_POST['title'];
$schoolSelect = $_POST['schoolSelect'];
$text = $_POST['content'];
require("./php/dbCon.php");
$sql = "INSERT INTO webNews (title,school,context)
VALUES ('$title','$schoolSelect', '$text')";
if ($conn->query($sql) === TRUE) {
   echo "文章發表成功";
} else {
   //echo "Error: " . $sql . "<br>" . $conn->error;
   echo "文章發表失敗";
}
$conn->close();
?>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料