Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#5220 closed Bug (fixed)

Style tag in body element messes output in CKEditor fullpage edit

Reported by: Matti Järvinen Owned by: Garry Yao
Priority: Normal Milestone: CKEditor 3.3
Component: Core : Output Data Version: SVN (CKEditor) - OLD
Keywords: Confirmed Review+ Cc: ckeditor@…

Description

Paste in fullpage edit source mode

<html>
	<head>
		<title>CKEditor Sample</title>
	</head>
	<body>
<style type="text/css">
p {
 border: 1px solid green;
}</style>
	<p>
		This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
</body>
</html>

Switch to wysiwyg and back to source results...

<html>
	<head>
		<title>CKEditor Sample</title>
	</head>
	<body>
	</body>
</html>
<style type="text/css">
p {
 border: 1px solid green;
}</style>
<body>
	<p>
		This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
</body>

Tested on svn: 5171

Attachments (1)

5220.patch (732 bytes) - added by Garry Yao 10 years ago.

Download all attachments as: .zip

Change History (11)

comment:1 Changed 10 years ago by skisulli

This is doing even stranger things if the style tag appear within a nested table. The content gets duplicated, and on the fullpage demo, the source can not be edited again, and submitting does not work.

Tested on svn: 5242

<html>
	<head>
		<title></title>
	</head>
	<body>
		<table border="1" cellpadding="1" cellspacing="1" style="height: 300px; width: 300px; ">
			<tbody>
				<tr>
					<td>
						1</td>
					<td>
						2</td>
					<td>
						3</td>
				</tr>
				<tr>
					<td>
						4</td>
					<td>
						<table border="1" cellpadding="1" cellspacing="1" style="height: 95px; width: 95px; ">
							<tbody>
								<tr>
									<td>
										<style type="test/css"></style></td>
									<td>
										2</td>
									<td>
										3</td>
								</tr>
								<tr>
									<td>
										4</td>
									<td>
										5</td>
									<td>
										6</td>
								</tr>
								<tr>
									<td>
										7</td>
									<td>
										8</td>
									<td>
										9</td>
								</tr>
							</tbody>
						</table>
					</td>
					<td>
						6</td>
				</tr>
				<tr>
					<td>
						7</td>
					<td>
						8</td>
					<td>
						9</td>
				</tr>
			</tbody>
		</table></body>
</html>

becomes

<html>
	<head>
		<title></title>
		<title></title>
	</head>
	<body>
		<table border="1" cellpadding="1" cellspacing="1" style="height: 300px; width: 300px; ">
			<tbody>
				<tr>
					<td>
						1</td>
					<td>
						2</td>
					<td>
						3</td>
				</tr>
				<tr>
					<td>
						4</td>
					<td>
						<table border="1" cellpadding="1" cellspacing="1" style="height: 95px; width: 95px; ">
							<tbody>
								<tr>
									<td>
										&nbsp;</td>
								</tr>
							</tbody>
						</table>
					</td>
					<td>
						<table border="1" cellpadding="1" cellspacing="1" style="height: 95px; width: 95px; ">
							<tbody>
								<tr>
									<td>
										&nbsp;</td>
								</tr>
							</tbody>
						</table>
					</td>
					<td>
						2</td>
					<td>
						3</td>
				</tr>
				<tr>
					<td>
						4</td>
					<td>
						5</td>
					<td>
						6</td>
				</tr>
				<tr>
					<td>
						7</td>
					<td>
						8</td>
					<td>
						9</td>
				</tr>
			</tbody>
		</table>
		<table border="1" cellpadding="1" cellspacing="1" style="height: 300px; width: 300px; ">
			<tbody>
				<tr>
					<td>
						1</td>
					<td>
						2</td>
					<td>
						3</td>
				</tr>
				<tr>
					<td>
						4</td>
					<td>
						<table border="1" cellpadding="1" cellspacing="1" style="height: 95px; width: 95px; ">
							<tbody>
								<tr>
									<td>
										&nbsp;</td>
								</tr>
							</tbody>
						</table>
					</td>
					<td>
						<table border="1" cellpadding="1" cellspacing="1" style="height: 95px; width: 95px; ">
							<tbody>
								<tr>
									<td>
										&nbsp;</td>
								</tr>
							</tbody>
						</table>
					</td>
					<td>
						2</td>
					<td>
						3</td>
				</tr>
				<tr>
					<td>
						4</td>
					<td>
						5</td>
					<td>
						6</td>
				</tr>
				<tr>
					<td>
						7</td>
					<td>
						8</td>
					<td>
						9</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
<style type="test/css">
</style>
<body>
	<table border="1" cellpadding="1" cellspacing="1" style="height: 300px; width: 300px; ">
		<tbody>
			<tr>
				<td>
					1</td>
				<td>
					2</td>
				<td>
					3</td>
			</tr>
			<tr>
				<td>
					4</td>
				<td>
					<table border="1" cellpadding="1" cellspacing="1" style="height: 95px; width: 95px; ">
						<tbody>
							<tr>
								<td>
									&nbsp;</td>
							</tr>
						</tbody>
					</table>
				</td>
				<td>
					<table border="1" cellpadding="1" cellspacing="1" style="height: 95px; width: 95px; ">
						<tbody>
							<tr>
								<td>
									&nbsp;</td>
							</tr>
						</tbody>
					</table>
				</td>
				<td>
					2</td>
				<td>
					3</td>
			</tr>
			<tr>
				<td>
					4</td>
				<td>
					5</td>
				<td>
					6</td>
			</tr>
			<tr>
				<td>
					7</td>
				<td>
					8</td>
				<td>
					9</td>
			</tr>
		</tbody>
	</table>
	<table border="1" cellpadding="1" cellspacing="1" style="height: 300px; width: 300px; ">
		<tbody>
			<tr>
				<td>
					1</td>
				<td>
					2</td>
				<td>
					3</td>
			</tr>
			<tr>
				<td>
					4</td>
				<td>
					<table border="1" cellpadding="1" cellspacing="1" style="height: 95px; width: 95px; ">
						<tbody>
							<tr>
								<td>
									&nbsp;</td>
							</tr>
						</tbody>
					</table>
				</td>
				<td>
					<table border="1" cellpadding="1" cellspacing="1" style="height: 95px; width: 95px; ">
						<tbody>
							<tr>
								<td>
									&nbsp;</td>
							</tr>
						</tbody>
					</table>
				</td>
				<td>
					2</td>
				<td>
					3</td>
			</tr>
			<tr>
				<td>
					4</td>
				<td>
					5</td>
				<td>
					6</td>
			</tr>
			<tr>
				<td>
					7</td>
				<td>
					8</td>
				<td>
					9</td>
			</tr>
		</tbody>
	</table>
	<p>
		&nbsp;</p>
	<p>
		6</p>
	<p>
		&nbsp;</p>
	<p>
		&nbsp;</p>
	<p>
		&nbsp;</p>
	<p>
		789</p>
	<p>
		&nbsp;</p></body>

comment:2 Changed 10 years ago by skisulli

Milestone: CKEditor 3.xCKEditor 3.3
Priority: NormalHigh

comment:3 Changed 10 years ago by skisulli

Also some of our users have experienced this causing their browser to crash. It appears that there may be a long/infinite loop that is crashing the browser.

comment:4 Changed 10 years ago by Garry Yao

Component: GeneralCore : Output Data
Keywords: Confirmed added
Owner: set to Garry Yao
Priority: HighNormal
Status: newassigned

Changed 10 years ago by Garry Yao

Attachment: 5220.patch added

comment:5 Changed 10 years ago by Garry Yao

Keywords: Review? added

Though neither valid HTML nor XHTML allow <style> inside blocks, while it's a habit of web developers that we could show some tolerance here.

comment:6 Changed 10 years ago by skisulli

That fix seems to work in my case, but there is one more associated issue. It used to be common practice to put HTML comments inside style tags to prevent the style from causing issues in browsers that did not support css. Many of our users still do this. For example:

<style type="text/css">
<!--
p{color:red}
-->
</style>

Becomes in the final output

<style type="text/css">
<!--{cke_protected}{C}%3C!%2D%2D%0Ap%7Bcolor%3Ared%7D%0A%2D%2D%3E-->
</style>

The HTML comment in the stlye tag gets protected, but not un-protected.

comment:7 Changed 10 years ago by Kingsquare

Cc: ckeditor@… added

comment:8 in reply to:  6 Changed 10 years ago by Alfonso Martínez de Lizarrondo

Replying to skisulli:

That fix seems to work in my case, but there is one more associated issue.

Obviously that's a different problem, and it already has its own ticket: #4880

comment:9 Changed 10 years ago by Alfonso Martínez de Lizarrondo

Keywords: Review+ added; Review? removed

comment:10 Changed 10 years ago by Garry Yao

Resolution: fixed
Status: assignedclosed

Fixed with [5354].

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