Search code examples
javascripthtmlcssckeditorwysiwyg

How do I force center everything in CKEditor 4?

In CKEditor 4, How do I force all contents to be center at all times? I tried to play around with the Advanced Content Filter feature and it allowed me to prevent unwanted inline-css (due to copy pasting) but I can't find anything in the documentation that would allow me to force everything to be centralized.

Currently, everything I insert will be auto align to the left side as shown in the image below.

enter image description here

What I would like to have is everything to be centralized as shown in the image below

enter image description here

this is the config.js of my CKEditor

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];';
};

The rendered html body by CKEditor looks like this

<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.sstatic.net/5n4lS.png" 
            href="https://i.sstatic.net/5n4lS.png"><img alt="" height="170"
            data-cke-saved-src="https://i.sstatic.net/5n4lS.png"
            src="https://i.sstatic.net/5n4lS.png"
            width="500">
        </a>
</p>
<p>sasda</p>
<p>sdasda</p>
<p>sd</p>
<p>sd</p>
<p>as</p>
</body>
Solution

  • Add the following as the last line in config.js

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

    This however will only make the content appear centered in your editor. It will not insert a CSS style of centered alignment in the actual paragraphs. So, you also need to apply this CSS in your webpage which will later hold the html data like so:

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

    The !important; is necessary because a user might choose other alignment in your editor.