※ 引述《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

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 218.187.101.139
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1463930707.A.951.html
※ 編輯: nottt (218.187.101.139), 05/22/2016 23:41:22