為什麼是 CKEditor ?
- 現在還有在維護
- 因為還有在維護所以應該有圖檔拖曳上傳功能
- 真的有圖檔拖曳上傳功能 → 讚 live demo
下載及 demo 請到官網：CKEditor
--
如何使用
下載解壓縮
|
1 |
<script src="/???/ckeditor/ckeditor.js"></script> |
到 ckeditor/samples/toolbarconfigurator/index.html 自訂工具列
將設定值取代 config.js 檔案
--
使用 Ajax 上傳都是未更新前的資料問題
在上傳前套用以下程式
|
1 |
for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement(); |
--
拖曳圖檔至編輯區
基本知識、觀念建立：File Browser/Uploader
前端的程式都可以直接從官網下載，唯一需要自己準備的只有圖檔上傳後回傳的程式，大概是長這樣：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
class Upload { function __construct() { $ResizeWidth = 780; $ResizeHeight = 780; $id = $_GET['id']; $Upload_dir = '../../Upload/'. $id; if ( !is_dir( $Upload_dir ) ) mkdir($Upload_dir); $SourceFile = $_FILES['upload']['tmp_name']; list($width, $height, $type, $attr) = getimagesize($SourceFile); # 儲存的路徑檔名 $fn = explode('.', $_FILES['upload']['name']); array_pop($fn); $FileName = implode('.', $fn); # 上傳圖檔 寬或高 大於重新取樣設定 if ( $width > $ResizeWidth || $height > $ResizeHeight ) { $si = new SimpleImage(); $si->load($SourceFile)->best_fit($ResizeWidth, $ResizeHeight)->save($Upload_dir.'/'.$FileName.'.png'); } else { move_uploaded_file($SourceFile, $Upload_dir.'/'.$FileName.'.png'); } $return = array("uploaded"=>true, "fileName"=>$FileName.'.png', "url"=>"/photo.php?id={$id}&N=".$FileName); echo json_encode($return); } } |
長這樣的根據？
直接從官網範例 → File Upload ，在 Chrome 的 F12 追蹤得到上傳後需要回傳 json
|
1 2 3 4 5 |
{ "fileName":"\u4e2d\u6587_\u5927\u5bb6_aa_~!.png", "uploaded":1,"error":{"number":207,"message":"The uploaded file was renamed to \u0022\u4e2d\u6587_\u5927\u5bb6_aa_~!.png\u0022."}, "url":"\/userfiles\/files\/%E4%B8%AD%E6%96%87_%E5%A4%A7%E5%AE%B6_aa_~!.png" } |
硬要看官方文件的話，在這裡 → Uploading Dropped or Pasted Files
--
實際運用的情況
- 目前 2015.8.26 CKEditor 的版本為 4.5.3
- 預計達成功能
- 基本文字編輯、格式修改
- 附加圖檔
- 檔案拖曳直接上傳附加
- 複製、貼上上傳附加 (目前只支援 Firefox，找尋其他方案)
- 已上傳可瀏覽後附加不須重新上傳
使用 Plugins
- autogrow : 編輯區不是固定尺寸
- uploadimage : 拖曳檔案進編輯區即可上傳
- image2 : 讓圖片可移動以及改變大小
自訂 Plugin : 以瀏覽圖檔點選後直接插入為例
參考資料
- Inserting HTML into CKeditor from popup window
- [CKEditor] 增加上傳圖片功能 (這個用在圖片按鈕內的「瀏覽伺服器」，最後插入圖片的 Javascript 不同)
準備好以下材料
- 下載官方的 custom plugin : Timestamp Plugin
- 瀏覽圖庫的程式
操作流程長這樣
- 從工具列點選瀏覽圖庫按鈕，彈出一個瀏覽圖庫子視窗
- 選取後點選圖片
- 將圖片插入編輯區，關閉瀏覽圖庫視窗 (實際程式流程為相反)
實際上的操作就是按一下工具列按鈕，然後按一下圖片這兩下
關鍵點
|
1 |
window.opener.CKEDITOR.instances['id_NOTE'].insertHtml('ccc'); |
--
編輯時和前端顯示相同 CSS 結果
config.js
|
1 |
config.contentsCss = '../../css/modern-business.css'; |
--
2,935 total views, 1 views today