CKEditor工具欄關閉按鈕右對齊

我想在CK Editor（v4.4）中添加一個關閉按鈕，並且想要對齊它，屏幕截圖下面顯示最終產品。CKEditor工具欄關閉按鈕右對齊

enter image description here

隨着documentation從CKEditor的網站幫助，我能夠創建一個簡單的關閉插件。在小jQuery hack的幫助下，我可以對齊它，但是如果可能的話，我希望使用標準的工具條創建方法來對齊它，而不是在hack之下。

當前工作黑客

<script> 
    $(document).ready(function() { 
     var rteComment = CKEDITOR.replace("txtPluginDemo", { 
      toolbar: [ 
       ['NumberedList', '-', 'Image'], 
       ['Save'], 
       ['CKClose'], 
      ], 
      toolbarCanCollapse: false, 
      allowedContent: 'p img ol br', 
      disallowedContent: 'script', 
      extraAllowedContent: 'img[*]{*}(*)', 
      extraPlugins: 'ckclose', 

      image_previewText: "Image preview will be displayed here.", 
      disableNativeSpellChecker: false, 
      //If true <p></p> will be converted to <p>&nbsp,</p> 
      fillEmptyBlocks: true, 
      removePlugins: 'contextmenu,liststyle,tabletools', 
      skin: 'moonocolor', 
     }); 
     rteComment.on("close", function (evt) { 
      alert("Ok time to close it."); 
      return true; 
     }); 
     rteComment.on("instanceReady", function (evt) { 
      //THIS IS HACK 
      $(".cke_button__ckclose").closest(".cke_toolbar").css({ "float": "right" }); 
     }); 
    }) 
</script>

我希望有會在下面的代碼，這將讓我在這裏指定我的CSS類的一些選項。

CKEDITOR.plugins.add('ckclose', { 

    // Register the icons. They must match command names. 
    icons: 'ckclose', 

    // The plugin initialization logic goes inside this method. 
    init: function (editor) { 

     // Define an editor command that inserts a timestamp. 
     editor.addCommand('closeEditor', { 

      // Define the function that will be fired when the command is executed. 
      exec: function (editor) { 
       if (editor.fire("close")) { 
        editor.destroy(); 
       } 
      } 
     }); 

     // Create the toolbar button that executes the above command. 
     editor.ui.addButton('CKClose', { 
      label: 'Discard changes and close the editor', 
      command: 'closeEditor', 
      toolbar: 'insert' 
     }); 
    } 
});

下圖是Firefox的Inspect元素視圖。

enter image description here

來源

2014-09-03 ndd

你可以把這塊

rteComment.on("instanceReady", function (evt) { 
    $(".cke_button__ckclose").closest(".cke_toolbar").css({ "float": "right" }); 
});

rignt內部

init: function(editor) {

（例如，它的右括號之前）。這應該夠了。

此外，您不需要將初始化信息放在主文件的SCRIPT標記中。它可以是清潔劑使用config.js

http://docs.ckeditor.com/#!/guide/dev_configuration

而且，在這裏看到一個插件的一個有趣的例子：

How to add an ajax save button with loading gif to CKeditor 4.2.1. [Working Sample Plugin]

來源

2015-05-09 16:14:01

我得到的幫助來自上面的回答稍微改變其代碼爲我工作

CKEDITOR.on("instanceReady", function (evt) { 
       $(".cke_button__custom").closest(".cke_toolbar").css({ "float": "right" }); 
});

「custom」是我的按鈕名稱。謝謝，

來源

2015-10-01 07:14:23 azad

CKEditor工具欄關閉按鈕右對齊

回答

相關問題