如何為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');
                        }
                     }