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

強化CKEditor編輯器的排版功能

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

套用樣式

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


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

先選取文字

然後套用樣式

大功告成! 很簡單吧!


套用提示框

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

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

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

儲存後超美的啊!


兩欄式或三欄式排版

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

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

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

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


在兩個欄位間換行

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


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


圖片自適應加框

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

插入圖片後,點一下圖片

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

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

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

test

test


活動剪影秀

360相片測試

學測
距離學測還有...
新聞RSS跑馬燈
標籤
Dr.eye 英文字典
查單字
維基百科查詢
查百科
萌典查生字
查生字
推文工具
搜尋
天氣一週預報
網頁列表選單