Opened 7 years ago

Last modified 4 years ago

#8129 confirmed Bug

Inline CSS does not work when there are comments inside <style> tags

Reported by: fernandomm Owned by:
Priority: Normal Milestone:
Component: General Version: 3.5.3
Keywords: Cc: krithika.ha@…

Description

Inline CSS is not working there are comments inside <style> tags.

How to reproduce:

1) Open ckeditor and switch to source code editor.

2) Paste the following html:

<html>
<head>
    <style type="text/css">
<!--
    .big {
         font-size: 30px;
    }
-->
    </style>
</head>
<body>
    <p class="big">
    Example
    </p>
</body>
</html>

3) Switch back to Wysiwyg editor. "Example" text will be small.

If you try with:

<html>
<head>
    <style type="text/css">
    .big {
         font-size: 30px;
    }
    </style>
</head>
<body>
    <p class="big">
    Example
    </p>
</body>
</html>

It works ok.

Change History (9)

comment:1 Changed 7 years ago by Jakub Ś

Status: newconfirmed
Version: 3.63.5.3

When switching to Source code looks like untouched but if you look at the generated source with firebug you will see:

<style type="text/css">
<!--{cke_protected}{C}%3C!%2D%2D%0A%20%20%20%20.big%20%7B%0A%20%20%20%20%20%20%20%20%20font-size%3A%2030px%3B%0A%20%20%20%20%7D%0A%2D%2D%3E--></style>

We had an issue about this problem #4880 but it is said that it was fixed with #4475. Well not everything was fixed.

comment:2 Changed 7 years ago by Alfonso Martínez de Lizarrondo

#4880 is fixed. Previously when you switched back to source the contents became corrupted, there was a data loss.

This issue is about allowing the styles work while in design even if they are commented out. This has been the way that it has worked since long ago (v2) due to the protection of comments.

Last edited 6 years ago by Jakub Ś (previous) (diff)

comment:3 Changed 6 years ago by Jakub Ś

Other related to problems with HTML comments: #8732, #8569, #8640, #8216, #6709, #8812

Last edited 6 years ago by Jakub Ś (previous) (diff)

comment:4 Changed 4 years ago by Guest

I am using the latest ckeditor 4.1 version and I am facing the same problem where my input html has style with comments and this style gets converted to cke_protected and style does not have any effect.

Input HTML: <html> <style>

<!--

.headertop1 {

width: 100%;

}

.headercontent {

color: #000000;

font-family: verdana;

font-size: 16pt;

} --> </style> </html>

And adding in ckeditor this gets converted to

<style>

<!--{cke_protected}{C}%3C!%2D%2D%0A%0A.headertop1%20%7B%0A%0A%20%20width%3A%20100%25%3B%0A%0A%7D%0A%0A.headercontent%20%7B%0A%0A%20%20color%3A%20%23000000%3B%0A%0A%20%20font-family%3A%20verdana%3B%0A%0A%20%20font-size%3A%2016pt%3B%0A%0A%7D%0A%0A%2D%2D%3E--></style>

Expected result: I want the styles to get applied but I cannot change the input html.

comment:5 Changed 4 years ago by Guest

Cc: krithika.ha@… added

comment:6 Changed 4 years ago by Guest

Can someone check this ?This is affecting the input html passed to ckeditor as styles get lost.

comment:7 Changed 4 years ago by Jakub Ś

Due to changes introduced in CKEditor 4.3.4, styles in comments no longer get destroyed.

Instead they get encoded in wysiwyg mode and decoded in source mode. This doesn't destroy styles but also makes them not working in wysiwyg mode.
Fortunately such styles will work in page preview or target page but having them work in wysiwyg mode still needs to be implemented.

comment:8 Changed 4 years ago by Guest

Thanks for the reply .Can you let me know what do you mean by target page with ckeditor? Also is there any way it can be implemented in readonly mode of wysiwyg ?Having it in atleast readonly mode would help.

comment:9 Changed 4 years ago by Jakub Ś

When you create HTML in editor it will either become part of the non-editable webpage (target page) or in case of full-page mode it will become the web page. By term target page I simply mean place (HTML page) where content created in CKEditor will be displayed.

Readonly mode won’t work here unfortunately because it doesn’t decode previously encoded styles in comments.

Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy