Question

在CKEditor 4中，如何强制所有内容始终居中？我尝试使用高级内容过滤器功能，它允许我防止不需要的内联css（由于复制粘贴）但我在文档中找不到任何可以强制所有内容集中的内容。

目前，我插入的所有内容都会自动对齐到左侧，如下图所示。

我希望拥有的是集中的所有内容，如下图所示

这是我的CKEditor的config.js

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.removeButtons = 'Form,About';
config.forcePasteAsPlainText = true;
config.pasteFromWordRemoveStyles = true;
config.pasteFromWordRemoveFontStyles = true;
config.AutoDetectPasteFromWord = true ;
config.allowedContent =
    'h1 h2 h3 p i u strong em;' +
    'a[!href];' +
    'img(center)[!src,alt,width,height];';
};

CKEditor渲染的html体看起来像这样

<body contenteditable="true" class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders"
  spellcheck="false">

  <p>
        <a  data-cke-saved-href="https://i.stack.imgur.com/5n4lS.png" 
            href="https://i.stack.imgur.com/5n4lS.png"><img alt="" height="170"
            data-cke-saved-src="https://i.stack.imgur.com/5n4lS.png"
            src="https://i.stack.imgur.com/5n4lS.png"
            width="500">
        </a>
</p>
<p>sasda</p>
<p>sdasda</p>
<p>sd</p>
<p>sd</p>
<p>as</p>
</body>

Answer 1

将以下内容添加为config.js

中的最后一行

CKEDITOR.addCss('.cke_editable p { text-align: center !important; }');

然而，这只会使内容在您的编辑器中居中。它不会在实际段落中插入CSS样式的居中对齐。因此，您还需要在您的网页中应用此CSS，以后将保存html数据：

<style type="text/css">
.cke_editable p {
    text-align: center !important;
}
</style>

!important;是必要的，因为用户可能会在编辑器中选择其他对齐方式。

Answer 2

根据您的HTML结构，您应该在.cke_editable类上 text-align: center ：

.cke_editable {
  text-align: center;
}

<body contenteditable="true" class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" spellcheck="false">

  <p>
    <a data-cke-saved-href="https://i.stack.imgur.com/5n4lS.png" href="https://i.stack.imgur.com/5n4lS.png"><img alt="" height="170" data-cke-saved-src="https://i.stack.imgur.com/5n4lS.png" src="https://i.stack.imgur.com/5n4lS.png" width="500">
    </a>
  </p>
  <p>sasda</p>
  <p>sdasda</p>
  <p>sd</p>
  <p>sd</p>
  <p>as</p>
</body>

希望这有帮助！

如何强制CKEditor 4中的所有内容？

2 个答案: