如何为ckeditor定义自己的列表样式？

Question

有没有办法为ckeditor定义自己的列表样式。 我找到了插件http://ckeditor.com/addon/liststyle但它让我只能选择圆形或方形之类的东西。

我想在我可以使用的应用程序中为 ol 或 ul 定义自己的 css 类。 例如，在列表元素之间定义更多空间的类。 编辑器的用户应该通过上下文菜单选择列表类，就像在漂亮的“liststyle”插件中一样。

有没有办法做到这一点？

Answer 1

我正在处理 CKEditor 以向liststyle插件添加自定义列表样式。

我使用 CSS 类添加了一种新样式（如果您愿意，可以添加更多样式）。

方法如下：在liststyle.js （去混淆后）我插入我的.logo类：

..........
function e(c,e){
    c.lang.liststyle.logo="My bullet"; // BBoyanov - adding 'My bullet' as title in dropdown list (in current language), otherwise it stay "empty" title
    var b=c.lang.liststyle;
........
style:"width:150px",
items:[[b.notset,""],[b.circle,"circle"],[b.disc,"disc"],[b.square,"square"], 
[b.logo,"logo"]],//BBoyanov - css class 'logo' as Bullet \,[b.logo,"logo"]\
........
commit:function(a){
  var b=this.getValue();b?a.setStyle("list-style-type",b):a.removeStyle("list-style-type");
  "logo"==b?a.setAttribute("class",'logo'):a.removeAttribute("class");//BBoyanv set 'logo' as CSS class
........
h={a:"lower-alpha",A:"upper-alpha",i:"lower-roman",I:"upper-roman", 
1:"decimal", disc:"disc", circle:"circle", square:"square",logo:"logo"};//BBoyanov \,logo:"logo"\
........

您在ckeditor.css （在 CKEditor 中可视化）和您自己的 CSS 文件中定义 CSS 类。

如果你喜欢不同语言的不同标题，你必须把translation放在CKEditor对应语言的.js文件中。

它对我有用。

但是，这可能是注入，因为它接管了allowedContent - 需要测试和确认。

Answer 2

确认上述方法有效，我正在使用 Drupal、Ckeditor 列表样式（插件）和 Ckeditor 列表样式模块（Drupal 模块）。

我需要对 lang > en.js 文件进行更改以添加适当的标题而不是作为 OP 的函数。

    cute: 'Cute',

完成后，在 liststyle.js 文件中，我将现有代码更新为：

liststyle.js 文件中的现有代码：

                    commit: function(element) {
                        var value = this.getValue();
                        if (value)
                            element.setStyle('list-style-type', value);
                        else
                            element.removeStyle('list-style-type');
                    }

新代码：

                     commit: function(element) {
                        var value = this.getValue();
                        if (value) {
                            if (value == 'cute') {
                                element.setAttribute("class", 'cute');
                                element.removeStyle('list-style-type');
                            } else {
                                element.setStyle('list-style-type', value);
                            }
                        } else {
                            element.removeStyle('list-style-type');
                        }
                     }