Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#5220 closed Bug (fixed)

Style tag in body element messes output in CKEditor fullpage edit

Reported by: matti 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 5 years ago.

Download all attachments as: .zip

Change History (11)

comment:1 Changed 5 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 5 years ago by skisulli

  • Milestone changed from CKEditor 3.x to CKEditor 3.3
  • Priority changed from Normal to High

comment:3 Changed 5 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 5 years ago by garry.yao

  • Component changed from General to Core : Output Data
  • Keywords Confirmed added
  • Owner set to garry.yao
  • Priority changed from High to Normal
  • Status changed from new to assigned

Changed 5 years ago by garry.yao

comment:5 Changed 5 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 follow-up: Changed 5 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 5 years ago by Kingsquare

  • Cc ckeditor@… added

comment:8 in reply to: ↑ 6 Changed 5 years ago by alfonsoml

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 5 years ago by alfonsoml

  • Keywords Review+ added; Review? removed

comment:10 Changed 5 years ago by garry.yao

  • Resolution set to fixed
  • Status changed from assigned to closed

Fixed with [5354].

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