CODEWITHSUNDEEP
javascriptckeditor
Wiktor
Wiktor

Reputation: 35

CKEditor display formatted(with CKEditor CSS) HTML from database

This is my first post so I would like to say it's nice to join this community and I will do my best to help others but I'm the one that needs help right now.

--Problem

I've got problem with displaying proper styling of text retrieved from CKE with .getData(), saved into DB and displayed in article.

--When it works?

When I include this CSS:

<link rel="stylesheet" href="\js\ckeditor\contents.css">

in my base.html.twig <head> tag,this changes the css of the site.

--What do I need to do?

What I need to do to avoid conflict? or is there any method to render text without making it editable? Something like CKEDITOR.render(tagId)

--Some images: enter image description here

enter image description here

With Regards

Wiktor

Upvotes: 1

Views: 1482

Answers (1)

j.swiderski
j.swiderski

Reputation: 2445

Please see: https://docs.ckeditor.com/ckeditor4/latest/guide/dev_framed.html#content-styles-vs-page-styles https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss

If you are using classic CKEditor then its contents are held inside an iframe with a separate document. In order to style that internal document CKEditor attaches contents.css to it. Since internal styles in separate CSS files are not being saved together with HTML or merged into HTML it is important that you use same styles inside contents.css as you would like to see on your target page (where saved content will be used).

This is not CKEditor bug but simply a different approach you need to apply inside your application.

If you are creating content for different pages you can either create one large contents.css file or, in case of any styles conflicts multiple CSS files which you can load dynamically based on some logic (it will require writing some code to handle that) using contentsCss setting. Please note that in case of dynamic CSS switching you do not want to use contentsCss inside config.js file but directly in instance configuration on HTML page where you can use server-side tags to "spit out" correct configuration for CKEditor instance e.g.

var editor = CKEDITOR.replace( 'editor1',{
    language : 'en',
    // other configuration settings
    // ...
    contentsCss : [ '/css/mysitestyles.css', '/css/anotherfile.css' ]
}

You can use server-side tag which will return whole editor configuration or simply only this part contentsCss : [ '/css/mysitestyles.css', '/css/anotherfile.css' ] or even correct file paths when HTML is being rendered.

Upvotes: 1

Related Questions