CKEditor toolbar close button right align

3
votes

I want to add a close a button in CK Editor (v4.4) and want to align it right, below screen shot shows the end product.

enter image description here

With the help of documentation from CKEditor website I was able to create a simple close plugin. With the help of little jQuery hack I am able align it right but if possible I would like to align it using standard toolbar creation approach rather then below hack.

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

I am hoping that there will be some option in the below code which will let me specify the my css class here.

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

Below image is the Inspect Element View from Firefox.

enter image description here

2
ckeditor

2 Answers

2
votes

I got help from the above answer slightly change the code its worked for me

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

"custom" is my button name. Thank you,

0
votes

You can put this piece

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

rignt inside

init: function( editor ) {

(e.g., before its closing bracket). That should be enough.

Also, you don't need to put initialization info in a SCRIPT tag of your main file. It can be cleaner to use config.js

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

Also, see an interesting example of a plugin here:

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