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工具栏关闭按钮右对齐

回答

相关问题