CKEditor 5 與 PHP 圖片上傳範例

此專案示範了如何在網頁中使用 CKEditor 5 進行所見即所得的編輯，並通過 PHP 處理圖片上傳。上傳的圖片會使用時間戳記和隨機數字來重新命名，以確保檔名的唯一性。

功能

• CKEditor 5 整合：使用 CKEditor 5 在 div 元素中實現豐富的文本編輯功能。
• 自定義圖片上傳：透過 PHP 處理圖片上傳功能。
• 時間戳記命名檔案：上傳的圖片檔案會使用時間戳記和隨機數字來命名，避免檔名衝突。

如何開始

先決條件

• 支援 PHP 的網頁伺服器（例如：Apache、Nginx）。
• CKEditor 5 使用 CDN 引入，不需要額外安裝。

安裝與設定

1. clone此儲存庫：

2. 設定專案目錄：

   確保你的網頁伺服器指向此目錄，或者將文件移動到伺服器的根目錄。

3. 設置目錄權限：

   確保 uploads 目錄具有寫入權限，這樣圖片才能成功上傳。

4. 啟動伺服器並測試：

   透過瀏覽器開啟專案目錄下的 index.html，測試 CKEditor 5 編輯器和圖片上傳功能。

使用說明

• 編輯器初始化後，可以直接在網頁中進行文本編輯。
• 點擊圖片上傳按鈕，選擇圖片後，圖片會自動上傳到伺服器並顯示在編輯器中。
• 上傳的圖片會自動命名為 時間戳記.副檔名。

目錄結構

• index.html：主頁面，列表頁，由這頁連到新增、刪除與修改
• form.html：新增頁，包含 CKEditor 5 編輯器，接 doAdd.php 與 upload.php。
• upload.php：處理圖片上傳的 PHP 程式。
• doAdd.php：處理寫入資料表的程式。
• form.php：修改，包含 CKEditor 5 編輯器，目前版本沒有接修改。
• uploads/：上傳的圖片將存儲在此目錄。
• article.sql：使用的資料庫架構。
• PDO_connect.php：連線物件，使用 PDO。