[精讚] [會員登入]
3391

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

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

分享此文連結 //n.sfs.tw/10311

分享連結 [CKeditor4] 設定區塊樣式、段落格式、字型名稱及字型大小@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-23 16:46:07 最後編修
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

END

你可能感興趣的文章

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

[jQuery] 利用load()來達成ajax的寫法 jQuery中利用load()來達成ajax的寫法,也有人稱他是假的ajax,作法就是..

[Vue3.js] vue3 運行時出現 Network: unavailable 的解決方法 vue3 運行測試平台時如果需要遠端連線的話怎麼辦?

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

[jQuery] select 元件的取值及給值 html中的元件select,在jquery中要如何使用?

Jquery+CSS div區塊的拖拉(drag and drop)效果 網頁想要做到拖拉區塊的功能,但又不想使用他人的插件或是 jquery-ui的話,怎麼做?

我有話要說

>>

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

訪客留言

[無留言]

隨機好文

SELinux 常用指令和檔案 在Redhat系列中,Centos5以後加入了selinux,他並沒有這麼可怕,不必每次看到Selinux ,就想把他

PHP for sphinx 函式庫安裝 PECL/sphinx PHP>= 5.2.2 已經能原生支援 sphinx,可是預設的沒有裝,我們得自己裝才能用

世紀帝國征服者新版本--被遺忘的帝國 世紀帝國征服者新版本--被遺忘的帝國 世紀二代的征服者是精典遊戲中的精典,aofe更好玩...

[AS3] 我做的唯一一個Flash As3遊戲UFO INVADSION [AS3] 我做的唯一一個Flash As3遊戲,是第一個也是最後一個,後來就沒再寫as3,不過as3還滿好玩的。

[CodeIgniter 3] 資料庫的使用方法整理2/2 CI3 承襲 CI2,有很多的builder class可以用,依各人的使用習慣,有人喜歡一堆sql字串,有人喜歡用helper