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

是否有一种方法可以为ckeditor定义自己的列表样式。我已经找到了插件，但它只允许我选择圆形或方形之类的东西

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

---

有什么方法可以做到这一点吗？

我正在使用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类

如果您喜欢不同语言的不同标题，则必须在CKEditor的相应语言

.js

文件中放置

翻译

这对我有用

---

然而，这可能是注入，因为它接管了

允许的内容

——需要测试和确认。

我正在与CKEditor打交道，以便将自定义列表样式添加到

列表样式

插件中

我使用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类

如果您喜欢不同语言的不同标题，则必须在CKEditor的相应语言

.js

文件中放置

翻译

这对我有用

---

然而，这可能是注入，因为它接管了

允许的内容

——需要测试和确认。

确认了上述方法的有效性，我正在使用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');
                        }
                     }

---

确认了上述方法的有效性，我正在使用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');
                        }
                     }

---

只是小小的修正：

“logo”==b？a.setAttribute（“类”），b:a.removeAttribute（“类”）

你应该通过点击而不是评论来更正你的帖子，只是一个小小的更正：

“logo”==b？a.setAttribute（“class”，b）：a.removeAttribute（“class”）你应该通过点击来更正你的帖子，而不是通过评论