Re: [請益] CKEditor 編號清單設定成階層式

作者: nottt (無)   2016-05-22 23:24:58
※ 引述《pmdaisuki (神奇寶貝天王)》之銘言:
: 將CKEditor用入網頁內後,發現編號清單只有1.、2.、3.
: 想請問有沒有辦法增加到有四種:
: 一、 二、 三、
: (一) (二) (三)
: 1. 2. 3.
: (1) (2) (3)
: 已爬過文,但相關討論好像不多
: 有改過content.css的life-style-type (IE無法顯示==)
: 但好像無法只靠css做成可以選擇編號類型的模式
: 也看過plugins資料夾裡liststyle的js檔
: 但沒找到可以改的地方...
: 這部分是我想設計的網頁最重要的功能
: 想請知道解決方法的大師們指點
: 謝謝!
: p.s. 有找到一個UEditor有我要的功能,但是簡字QQ
: 而且也沒有很重要的縮排功能
剛好我也遇到這個問題,看到底下推文有寫list-style的plugin,
底下也是有人不知道要怎麼用,後來有一位Venkat Polisetti有解答
來簡單介紹一下用法,以及怎麼改成有中文數字
首先是安裝,list-style有相依性,要安裝這兩個plugin
Dialog
Context Menu
或者直接裝full完整版 裝ckeditor就是要一堆玩具啊,不然要幹嘛
如果不是完整版的,在ckeditor/config.js裡面要加上這行
config.extraPlugins = 'liststyle';
如果已經有extraPlugins,要同時使用多個的話,用逗點分隔
例如同時使用video和liststyle,就是
config.extraPlugins = 'video,liststyle';
接下來在畫面上輸入一段字,點選項目符號後,在項目符號文字內容上按右鍵
會有展開選單,選擇後如下
http://i.imgur.com/yySl016.png
當然預設是沒有中文數字的,不過我們可以從ckeditor產生的項目符號發現基底是ol li
ol li可以利用css切換list-style-type(可以參考下面這篇)
http://blog.yam.com/smatter/article/21481382
或是w3c的try it,看各種list style的樣子
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_list-style-type_all
這一項就是我們要的
list-style-type: cjk-ideographic; /*中文國字數字*/
因此我們要修改ckeditor/plugins/liststyle/dialogs/liststyle.js這個檔案
要增加下拉選單的選項,可以看到這(約8x行)
else if ( startupPage == 'numberedListStyle' ) {
var listStyleOptions = [
[ lang.notset, '' ],
[ lang.lowerRoman, 'lower-roman' ],
[ lang.upperRoman, 'upper-roman' ],
[ lang.lowerAlpha, 'lower-alpha' ],
[ lang.upperAlpha, 'upper-alpha' ],
[ lang.decimal, 'decimal'],
[ '中文數字(一.二.三.)', 'cjk-ideographic']
];
最後一項第一欄是顯示的字,第二欄則是要代入的屬性值(給css用)
這樣選單就會多一項了
然後直接硬加一個選項而沒有透過lang檔其實不太漂亮
.....因為我一下子找不到full版的lang檔在哪,看有沒有人要教了XD
補上成品
http://i.imgur.com/W4fLR46.png
修正過的liststyle檔案放在github,可以抓來玩看看
https://github.com/not0000/not0000.github.io/tree/master/liststyle
作者: pmdaisuki (神奇寶貝天王)   2016-05-23 00:00:00
謝謝分享! 原來可以用右鍵選編號樣式!但cjk-ideographic還是有無法在IE顯示的問題...

Links booklink

Contact Us: admin [ a t ] ucptt.com