CODEWITHSUNDEEP
javascripthtmlcssckeditor
Yur4k
Yur4k

Reputation: 159

Content with CKEDITOR is incorrectly displayed

i get source code, in CKEDITOR demo, and put in index.html in empty body.
Included:

<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>

But, content dispayed very bad, appears ugly in style and displayed.

<html>
<head>
<script src="//cdn.ckeditor.com/4.4.7/full/ckeditor.js"></script>
</head>
<body>
---Content source in CKEDITOR demo HERE
</body>
</html>

displayed:
https://i.sstatic.net/ATTWO.png
why it is displayed not as in a demo as it is correct to me to display content created through CKEDITOR

Upvotes: 0

Views: 117

Answers (2)

qubit
qubit

Reputation: 769

I took a look at their homepage and downloaded the basic package. I found a file called content.css in the package folder,

img.right
{
    border: 1px solid #ccc;
    float: right;
    margin-left: 15px;
    padding: 5px;
}

img.left
{
    border: 1px solid #ccc;
    float: left;
    margin-right: 15px;
    padding: 5px;
}

And if you look at the source code of the content snippet on their demo, 

<h1><img alt="Saturn V carrying Apollo 11" class="right" src="http://c.cksource.com/a/1/img/sample.jpg" /> Apollo 11</h1>

The image has a class called right, which is defined in content.css, and therefore it is floating to the right.

I think your problem is that the css file in not present/found in your project.

Maybe you can try to download the package and see if it works locally, so you can make sure that the problem is caused by the CDN and the missing file.

Just in case, I download the package here (no advertisements intended) http://ckeditor.com/download

Upvotes: 1

user4426164
user4426164

Reputation:

It is rendered by the browser in this way. If you want to add additional styles and modify the look you need to learn some CSS. There is no CSS whatsoever in the source from the editor.

Upvotes: 0

Related Questions