CKEditor 도구 모음 닫기 버튼 오른쪽 정렬

Question

CK 편집기 (v4.4)에서 닫기 버튼을 추가하고 오른쪽 정렬하려는 경우, 아래 스크린 샷은 최종 제품을 보여줍니다. CKEditor 웹 사이트에서 documentation의 도움으로

나는 간단한 가까운 플러그인을 만들 수 있었다. 작은 jQuery 해킹 덕분에 나는 맞을 수 있지만 가능하다면 해킹 아래의 표준 툴바 생성 방법을 사용하여 정렬하고 싶습니다. 나는 내가 여기에 내 CSS 클래스를 지정하게됩니다 아래의 코드에서 몇 가지 옵션이 될 것으로 기대하고있다

<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> 

현재 작업 해킹.

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의 검사 요소보기입니다.

Answer 1

당신은

init: function(editor) { 

내부에이 작품을

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

보려면 오른쪽을 넣을 수 있습니다 (예를 들어, 닫는 괄호 전). 그 정도면 충분합니다.

또한 기본 파일의 SCRIPT 태그에 초기화 정보를 넣지 않아도됩니다.

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

가 여기에 플러그인의 흥미로운 예를 참조 config.js이 사용하는 청소기가 될 수 있습니다

내가 위의 대답 도움을 얻었다

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"은 나의 버튼 이름이다. 감사합니다.