CKEditor 4.5.3 之初步使用

為什麼是 CKEditor ?

  1. 現在還有在維護
  2. 因為還有在維護所以應該有圖檔拖曳上傳功能
  3. 真的有圖檔拖曳上傳功能 → 讚 live demo

下載及 demo 請到官網:CKEditor

如何使用

下載解壓縮

到 ckeditor/samples/toolbarconfigurator/index.html 自訂工具列

將設定值取代 config.js 檔案

使用 Ajax 上傳都是未更新前的資料問題

在上傳前套用以下程式

拖曳圖檔至編輯區

基本知識、觀念建立:File Browser/Uploader

前端的程式都可以直接從官網下載,唯一需要自己準備的只有圖檔上傳後回傳的程式,大概是長這樣:

長這樣的根據?

直接從官網範例 → File Upload ,在 Chrome 的 F12 追蹤得到上傳後需要回傳 json

硬要看官方文件的話,在這裡 → Uploading Dropped or Pasted Files

實際運用的情況

  • 目前 2015.8.26 CKEditor 的版本為 4.5.3
  • 預計達成功能
    • 基本文字編輯、格式修改
    • 附加圖檔
      • 檔案拖曳直接上傳附加
      • 複製、貼上上傳附加 (目前只支援 Firefox,找尋其他方案)
      • 已上傳可瀏覽後附加不須重新上傳

使用 Plugins

  • autogrow : 編輯區不是固定尺寸
  • uploadimage : 拖曳檔案進編輯區即可上傳
  • image2 : 讓圖片可移動以及改變大小

自訂 Plugin : 以瀏覽圖檔點選後直接插入為例

參考資料

準備好以下材料

 

操作流程長這樣

  1. 從工具列點選瀏覽圖庫按鈕,彈出一個瀏覽圖庫子視窗
  2. 選取後點選圖片
  3. 將圖片插入編輯區,關閉瀏覽圖庫視窗 (實際程式流程為相反)

實際上的操作就是按一下工具列按鈕,然後按一下圖片這兩下

關鍵點

 

編輯時和前端顯示相同 CSS 結果

config.js

 

667 total views, 3 views today