Ticket #5220 (closed Bug: fixed)

Opened 5 years ago

Last modified 4 years ago

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

5220.patch (732 bytes) - added by garry.yao 5 years ago.

Change History

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

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

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

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

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: ↓ 8 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

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

Fixed with [5354].

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