Панель инструментов CKEditor close button right align

Question

Я хочу добавить кнопку закрытия в CK Editor (v4.4) и хочу выровнять ее справа, внизу снимок экрана показывает конечный продукт.

С помощью documentation с сайта CKEditor Я был в состоянии создать простой близкий плагин. С помощью маленького jQuery 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' 
     }); 
    } 
}); 

Ниже изображен элемент Inspect Element View из Firefox.

Answer 1

Вы можете поместить этот кусок

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

внутри

право разместить

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]

Answer 2

я получил помощь из приведенного выше ответа немного изменить код его работал для меня

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

"custom" - это имя моей кнопки. Спасибо,