Opened 13 years ago

Last modified 10 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 13 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 13 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 12 years ago by Jakub Ś (previous) (diff)

comment:3 Changed 12 years ago by Jakub Ś

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

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

comment:4 Changed 10 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 10 years ago by Guest

Cc: krithika.ha@… added

comment:6 Changed 10 years ago by Guest

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

comment:7 Changed 10 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 10 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 10 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 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy