臺南市資訊中心班級網頁開發小組

強化CKEditor編輯器的排版功能

CKEditor編輯器是一套很強大的所見即所得編輯器,但如果您想做一些兩欄式、三欄式的排版,或者想要快速的加入BootStrap的一些提示框、標籤或者讓圖片可以自適應的話,還是得自己手動寫語法。對於一般老師來說,這是相當麻煩的,所以,今天,我們加入了一堆排版功能,讓老師按一按就可以做出美美的線上文件。

套用樣式

或許眼力比較好的老師有發現, CKEditor編輯器多了一個樣式的下拉選單,這要怎樣用呢?很簡單,通常是「選取文字(或圖片)」,然後「選取樣式」就結束了。


以上方的這個陰影標題為例:

先選取文字

然後套用樣式

大功告成! 很簡單吧!


套用提示框

BootStrap有提供四種提示框(或者警告視窗),分別是資訊(藍色)、成功(綠色)、警告(橘色)、危險(紅色),現在也可以用樣式很快的套用之:

游標點擊該段落即可(不用標)

套用想要的框就可以立即看到效果!

儲存後超美的啊!


兩欄式或三欄式排版

一般來說,排版有人可能會用表格來排,但是,這是錯的!表格就該是表格,排版就用純排版方式,如此,在手機或其他行動裝置看起來才會正常漂亮。

點擊右上角的齒輪,選擇想要的排版

可放圖片及文字,不需要的自己刪掉

點擊圖片兩下就可以換圖了!


在兩個欄位間換行

若是連續用兩欄或三欄,萬一想要在之間再插入新的內容,您會發現游標很難插入去按Enter,這裡有個簡單一點的方法!


將滑鼠移到某個分欄的框下方,應該會服現出一條紅色虛線。仔細看一下紅色虛線右邊,會有一個紅色換行符號,點下去就可以插入一個新的段落喔!


圖片自適應加框

什麼叫做自適應?就是圖太大張會自動縮小,以符合各種行動裝置。懶得自己才切縮放或者設定圖片大小時,自適應圖片就很重要!其實班級網頁在「新聞」和「文章列表」中都會自動針對圖片做自適應。但如果您想手動加入圖片自適應功能,或者想替圖片加個外框,那麼您可以這麼做:

插入圖片後,點一下圖片

然後選擇「自適應圖框」的樣式

這樣圖片就有外框且會自動縮小了!

還有更多樣式,不妨自己試試看喔!

test

test


活動剪影秀
  • slider image 1
  • slider image 2
  • slider image 3

360相片測試

學測
距離學測還有...
新聞RSS跑馬燈
標籤
Dr.eye 英文字典
查單字
維基百科查詢
查百科
萌典查生字
查生字
推文工具
搜尋
天氣一週預報
網頁列表選單
懸浮微粒 (pm2.5) 預報 懸浮微粒 (pm2.5) 預報
空氣品質 (PSI) 預報 空氣品質 (PSI) 預報
QRCode
QR Code