Question

我想在CK编辑器（v4.4）中添加一个关闭按钮并想要正确对齐，在屏幕截图下方显示最终产品。

enter image description here

在CKEditor网站的documentation的帮助下，我能够创建一个简单的关闭插件。在小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'
        });
    }
});

下图是来自Firefox的Inspect Element View。

enter image description here

Answer 1

我从上面的答案得到了帮助，稍微改变了它为我工作的代码

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

＆＃34;自定义＆＃34;是我的按钮名称。谢谢，

Answer 2

你可以把这件作品

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]

CKEditor工具栏关闭按钮右对齐

2 个答案: