我如何在 CKEditor 4 中强制居中所有内容？

Question

在 CKEditor 4 中，如何强制所有内容始终居中？我尝试使用 Advanced Content Filter 功能，它允许我防止不需要的 inline-css （由于复制粘贴），但我在文档中找不到任何内容可以让我强制执行所有内容集中。

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

我想要的是一切都集中起来，如下图所示

这是我的 CKEditorconfig.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

根据您的 HTML 结构，您只需要 text-align: center .cke_editable class:

.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>

希望对您有所帮助！

Answer 2

在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; 是必需的，因为用户可能会在您的编辑器中选择其他对齐方式。

我如何在 CKEditor 4 中强制居中所有内容？

How do I force center everything in CKEditor 4?

html

javascript

css

wysiwyg

ckeditor