Question

有没有办法为ckeditor定义自己的列表样式。我找到了插件http://ckeditor.com/addon/liststyle，但它只允许我选择圆形或方形等内容。

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

有办法做到这一点吗？

Answer 1

（对不起，英语不好）你好从一周开始，我要处理CKEditor，以将自定义“列表”样式添加到 liststyle 插件中。结果：我添加了一种使用CSS类的新样式（如果愿意，可以添加很少的样式）。方法如下：在“ liststyle.js”（在“美化”之后）中插入“徽标”类

..........
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类。

如果您希望为不同的语言使用不同的标题，则必须在CKEditor的相应语言.js文件中放置“ translation”。它对我有用。但是，这可能是“注入”方法，因为它接管了“ allowedContent ”-需要测试和确认。

Answer 2

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

我需要对lang> en.js文件进行更改，以添加适当的Title而不是作为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');
                        }
                     }

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

2 个答案: