CKEditor 插件可同时更改所选段落和列表的默认边距

Question

我正在编写一个 CKEditor 插件来实现以下目标：默认情况下，<p>和<ul>标签引入一个不为 0 的默认边距。我想覆盖此行为并让用户在按下工具栏上的按钮时设置所选内容的边距段落和/或列表为 0。

例如，假设我们有以下内容：

翻译成下面的html：

到目前为止我编写的插件代码（plugin.js）是：

( function() {
    CKEDITOR.plugins.add( 'nomargin', {
        icons: 'nomargin',
        init: function( editor ) {
            editor.addCommand( 'nomargin', {
                                                exec: function( editor ) {
                                                    var style = new CKEDITOR.style( editor.config.nomargin_style );
                                                    editor.focus();
                                                    editor.fire( 'saveSnapshot' );
                                                    editor['applyStyle']( style );
                                                    editor.fire( 'saveSnapshot' );
                                                }
                                            } );
            editor.ui.addButton( 'NoMargin', {
                label: 'No Margin',
                command: 'nomargin'
            });
        }
});
})();

CKEDITOR.config.nomargin_style = {
    element: ['p', 'ul'],
    styles: { 'margin': '0'}
};

我的问题是，只要我一次选择每个段落或无序列表，它就可以工作。如果我同时选择段落和列表，则样式将不适用。即使我仅选择相同标签的元素（例如 2 个段落），样式也不会应用。我必须一次选择一个，按插件按钮，然后选择下一段或列表，再次按插件按钮等。这可能会令人困惑，因为两个元素的边距重叠，因此为了获得所需的结果，首先选择顶部段落按按钮，（还没有结果），然后选择列表并按按钮实现以下效果：

有人可以告诉我如何通过单击插件按钮来实现此目的吗？