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';
接下来在画面上输入一段字,点选项目符号后,在项目符号文字内容上按右键
会有展开选单,选择后如下


当然默认是没有中文数字的,不过我们可以从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
补上成品


修正过的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