[精讚] [會員登入]
520

[CKeditor4] 設定區塊樣式、段落格式、字型名稱及字型大小

CKeditor4中要自訂設定區塊樣式、段落格式、字型名稱及字型大小。

此文完整連結 http://n.sfs.tw/10311

複製連結 [CKeditor4] 設定區塊樣式、段落格式、字型名稱及字型大小@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2016-11-27 21:30:06 最後編修
2016-11-27 21:30:06 By 瘦河馬
 

CKeditor4 中可以改變區塊樣式、段落格式、字型名稱及字型大小,以下是我的設定,把常會用的挑出來..

修改 path/to/ckeditor/config.js

區塊樣式

ckeditor4可以定義class和style,所以在設定上相當的彈性,因為我用bootstrap的css,所以把他的label和alert都定義下去;同時,自定了一些會用的到樣式,這些樣式都可以自己定義,最後ckeditor4 會把他自動分類為「區塊樣式」「內嵌樣式」兩種,這就由不得你。

config.stylesSet = [
 { name: 'h3_blue', element: 'h3', styles: { 'color': '#376D9B' } },
 { name: 'h4_green', element: 'h4', styles: { 'color': '#379D9D' } },
 { name: '黑反白div' , element: 'div', attributes: { 'class': 'div_upsidedownblack' } },
 { name: 'code黑反白' , element: 'code', attributes: { 'class': 'code_upsidedownblack' } },
 { name: 'alert-warning', element: 'div', attributes: { 'class': 'alert alert-warning' } },
 { name: 'alert-success', element: 'div', attributes: { 'class': 'alert alert-success' } },
 { name: 'alert-info', element: 'div', attributes: { 'class': 'alert alert-info' } },
 { name: 'alert-danger', element: 'div', attributes: { 'class': 'alert alert-danger' } },
 { name: '按鍵', element: 'kbd', attributes: { 'class': 'likeabutton' } },
 { name: 'label-default', element: 'span', attributes: { 'class': 'label label-default' } },
 { name: 'label-primary', element: 'span', attributes: { 'class': 'label label-primary' } },
 { name: 'label-success', element: 'span', attributes: { 'class': 'label label-success' } },
 { name: 'label-info', element: 'span', attributes: { 'class': 'label label-info' } },
 { name: 'label-warning', element: 'span', attributes: { 'class': 'label label-warning' } },
 { name: 'label-danger', element: 'span', attributes: { 'class': 'label label-danger' } },
//    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow', 'padding':'3px' } },
];

段落格式

我把常用的挑出來,h6,h7理論上是可以不要了,除非你有做什麼特殊的樣式,這裡的標籤不能亂定義,一定要屬於區塊類型(Block-level Elements)[1] 的才可以

config.format_tags = 'p;h1;h2;h3;pre;div;h4;h5'

字型名稱和字型大小

字型名稱不能亂設定,只能設定大家一定都有的字型

字型大小我採用相對而不用絕對,這是為了適應調適化網頁的關係

config.fontSize_sizes = 'x0.8/0.8em;x0.9/0.9em;x1/1em;x1.2/1.2em;x1.4/1.4em;x1.6/1.6em;x1.8/1.8em;x2/2em;x2.58/2.5em;x3/3em;x4/4em;';
config.font_names = 'Arial;Arial Black;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;新細明體;細明體;標楷體;微軟正黑體
';

設定編輯器載入的CSS

最後也是最重要的,上面做了這麼多樣式的設定,一定要記得把他們給載入到ckeditor4中,否則你無法在編輯器中直接看到你設定的樣式,得等存檔後才能看,很不方便。

config.contentsCss = ['/web/css/bootstrap.css','/web/css/jinzan.css'];

參考資料

[1] http://www.w3schools.com/html/html_blocks.asp

你可能感興趣的文章

[jQuery] checkbox 及 radio 設定值 jQuery 之 checkbox 及 radio 取值及設定值的方法

[Javascript] 偵錯方式 (火狐中的javascript偵錯) javascript 並不是很容易偵錯(debug)的語言,但那是以前,現在有很多瀏覽器支持很多的工具,此文以火狐為例談談偵錯...

[CKeditor4] 設定區塊樣式、段落格式、字型名稱及字型大小 CKeditor4中要自訂設定區塊樣式、段落格式、字型名稱及字型大小。

[Javascript] NaN是什麼? javascript 的NaN和取得整數

[Ckeditor4] 讀、寫與插入內容到欄位 Ckeditor4 提供非常多方法,可以插入、讀取和寫入到TEXTAREA中

[Bootstrap] Datepicker使用/Bootstrap日期選日期選擇器的使用 Bootstrap日期選日期選擇器的使用

Javascript/Jquery 建立、讀取、刪除cookie值 Javascript/Jquery 建立、讀取、刪除cookie值

正則表達式:Email名稱防止連續輸入點(.)及下底線(_) Email的名稱中要允許特殊符號,但又不允許連續出現的正則表達式

[jQuery] textarea 的取值和給值 HTML 的 TEXTAREA 標籤若要用 jquery 取值,不能使用 .text() 或 .html() ,使用 .

[CKeditor4] 修改特殊字元 CKeditor4 中設定自己想用的特殊字元

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

UTF-8 BOM (Byte Order Mark) 的問題 在 Michael Kaplan 那看到 Every character has a story #4: U+feff

[Windows7] 移除IE10及移除IE11 Windows7 不得已的情況要移除IE11或IE10怎麼做?

[JAVA] JWS, JWT, JWE, JOSE是什麼? [JAVA] JWS, JWT, JWE, JOSE是什麼?非常的複雜,儘量來搞清楚..

詭異的創業思維 創業的思維中,有多少銀彈,有多少技術,有多少人脈,有多少時間等等,每個都要考慮進去,以熱忱建立的關係脆弱的像蘇打餅乾一樣..

設計的工作絕不接受比價 拿買陽春麵的價格想買牛肉麵,寧願倒掉也不賣