CODEWITHSUNDEEP
javascripthtmlcssckeditorwysiwyg
the newbie coder
the newbie coder

Reputation: 682

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>

Upvotes: 2

Views: 1584

Answers (2)

Wizard
Wizard

Reputation: 3151

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.

Upvotes: 3

Obsidian Age
Obsidian Age

Reputation: 42304

Based on your HTML structure, all you should need is text-align: center on the .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.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>

Hope this helps!

Upvotes: 3

Related Questions