By: Multimedia XP
2020-03-24


KAS Documentation / KAS Front End Documentation /

Properly Display CK Editor Content

By: Multimedia XP
2020-03-24

Properly Display CK Editor Content
How to keep the same styling as indicated in CKEditor into the website.

Use the ckContent class, this class is inside bootstrapXP.css that need to be added to the wrapper of the content coming from a CK Editor field. NOTE: The wrapper cannot be a <p>

 

<div class="ckContent "><?php echo $content_res->result(0,'content_'.LANG); ?></div>

 

If after adding this classthings are not back to the default then new updates need to be implemented in KASCORE/css/bootstrapXP.css, after the changes are made update KAS.

When it comes to images, all images are set to 100% in order to adapt to responsive scenarios, for example 

 

.ckContent img{
   width:100%
 }

 

To restrict the size of an image add local class with a max-width:

 

.ckContent img{
  max-width:400px;
 }

Comments