類用於對齊ckeditor

Question

我正在使用ckeditor，這真的很棒。 我唯一的問題是對齊對象時，我試圖使用類而不是樣式。 更具體地說，我想使用alignleft類來對齊左圖像，而不是使用style =“ float：left” 。 為此，我修改了插件ckeditor / plugins / image / dialogs / image.js

在id：'cmbAlign'中，我更改了設置和commid方法，以便根據情況添加類“ alignleft”或“ alignright”，但奇怪的是，當我嘗試更改類時（使用removeClass或addClass， setAttribute（'class'）也不起作用）。 代碼是：

id:'cmbAlign',
    type:'select',
    widths:['35%','65%'],
    style:'width:90px',
    label:b.lang.common.align,
    'default':'',
    items:[[b.lang.common.notSet,'none'],[b.lang.common.alignLeft,'left'],[b.lang.common.alignRight,'right']],
    onChange:function(){
        l(this.getDialog());
        o.call(this,'advanced:txtdlgGenStyle');
    },
    setup:function(C,D){
        if(C==d){
            var E=(D.getAttribute('class')+'').match(/align([a-z]+)?/);
            if(E&&E[1])E = E[1];else E='';
            this.setValue(E);
        }
    },
    commit:function(C,D,E){        
        var F = (this.getValue()+'');
        if(C==d||C==f){
            var G=(D.getAttribute('class')+'').match(/align([a-z]+)?/);
            if(G&&G[1]){
                if(F!=G[1]){
                    D.removeClass('align'+G[1]);
                    if(F!=='')D.setAttribute('rel',F); D.addClass('align'+F);
                }
            } else {
                if(F!=='')D.setAttribute('rel',F); D.addClass('align'+F);
            }

        }
}

請注意，我已經添加了D.setAttribute('rel',F) ，並且效果很好。

有人對此有任何想法或解決方案嗎？

Answer 1

這里是更多信息：

該代碼的解壓縮版本位於：

ckeditor / _source / plugins / image / dialogs / image.js（994行）

您無需猜測所有字母的含義，而是可以看到所涉及的實際對象，變量和函數。

我發布的有關監聽對話框事件的信息是基於查看該代碼並查看其作用的。

您需要停止添加內聯浮動樣式的對話框，否則它將覆蓋您應用於類的樣式。 浮點數未作為類添加，因此使用addClass或removeClass對其無效。 這意味着您需要以其他方式解決問題。

我想到了以下幾種可能性，我希望其他人可以建議其他方法：

1）您可以修改圖像插件中的代碼（但是如果更新了編輯器，它可能會被覆蓋）。

2）復制圖像插件並修改代碼以創建自定義插件，然后將圖像按鈕替換為調用該插件的按鈕。

3）通過偵聽對話框事件從對話框代碼外部進行工作，然后停止添加內聯浮動樣式，而是添加您的類。

希望這可以幫助，
喬

---

您正在使用哪個版本的CKEditor？ 我正在使用3.6.1。

我在ckeditor / plugins / image / dialogs / image.js文件中搜索了“ cmbAlign”。 我在第11行修改了此位：

id:'cmbAlign',type:'select',widths:['35%','65%'],style:'width:90px'.....

我將“ width：90px”更改為“ width：290px”，對話框變得更寬了。 因此，對該文件的更改對我的安裝有影響。

是否有可能正在使用_source目錄中的解壓縮文件？
的CKEditor / _source /插件/圖像/對話框/ image.js

只需提及一下是因為除非您正在加載ckeditor_basic文件之一而不是ckeditor.js文件，否則不會加載這些文件。

---

可能的方法：

您可以制作一個自定義插件來替換圖像插件。 這里有一個教程部分，其中包含有關創建插件的簡單說明：

http://docs.cksource.com/CKEditor_3.x/Tutorials

您可以將其用作插件工作原理的概述，但實際上您只是對默認圖像插件進行了一些更改。

只需從ckeditor / _source / plugins目錄中復制圖像插件文件夾，然后將其放在ckeditor / plugins目錄中即可。 您需要重命名插件並禁用默認的圖像插件。 然后，您可以將您在帖子中概述的更改進行到image.js文件。

要禁用默認圖像插件，請將其添加到您的配置設置中：

config.removePlugins = 'image';

---

另一種可能的方法：

將事件偵聽器添加到頁面，您可以設置腳本來執行以下操作：

監視“ dialogShow”事件，並檢查打開的對話框是否為圖像對話框。
如果是，請偵聽“對齊”選擇器的change事件。
對齊選擇器更改后，檢查是否選擇了“向左對齊”。
如果是這樣，請停止傳播該命令，並將您的類名稱插入“高級”選項卡的“樣式表類”字段中。

您可以將選擇器更改的事件偵聽器的優先級設置為“ 1”，這樣優先級才運行默認代碼。 “ on”方法的文檔顯示了可用的參數：

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html#on

您可以查看以下文章中的示例代碼以及有關設置的更多信息（使用jQuery）：

ckeditor將事件處理程序添加到對話框元素

在該帖子中，答案的第二部分（靠近頂部）以：

開始報價
如果要從另一個位置偵聽對select元素的更改，則可以創建一個鍵入“ dialogShow”事件的偵聽器。 這是一個例子：

// Watch for the "dialogShow" event to be fired in the editor,

結束報價

另外，您需要將“ dialogShow”事件的偵聽器包裝在“ instanceReady”事件的偵聽器中，以下是該示例代碼（使用jQuery）：

// After both the document and editor instance are ready, 
// Start listening for the image dialog

// Wait for the document ready event
$(document).ready(function(){

  // Wait for the instanceReady event to fire for this (editor1) instance
  CKEDITOR.instances.editor1.on( 'instanceReady', 
    function( instanceReadyEventObj )
    {
      var currentEditorInstance = instanceReadyEventObj.editor;

      ...Put Code To Listen For The "dialogShow" Event Here...
    }
  );
});

如果您對我寫的內容有任何疑問，請告訴我。

好吧，喬

Answer 2

如果更改核心文件，則在升級CKEditor時要小心。 最簡單（但不是最方便的編輯器）解決方案是：