Opened 7 years ago

Closed 7 years ago

#8590 closed Bug (invalid)

Form tags being removed on editor load in FF3.5 and Chrome 15

Reported by: Mike Owned by:
Priority: Normal Milestone:
Component: General Version: 3.0
Keywords: Cc:

Description

Problem editing existing forms using CKEditor the following code replicates the problem I'm having with our intranet cms:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Form problem example</title>
	<meta content="text/html; charset=utf-8" http-equiv="content-type" />
	<script type="text/javascript" src="../ckeditor.js"></script>
	<script src="sample.js" type="text/javascript"></script>
	<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<form action="sample_posteddata.php" method="post">
	<h2 class="samples">Form problem example</h2>
	<p>Works fine in IE6 - IE8, fails in FF3.5 & Chrome 15</p>
		<p>
			<div class="editorArea" style="min-height:400px;">
			<div id="mainEditor" name="mainEditor" style="width: 100%; height: 400px; margin-bottom:26px;" class="mainEditor">						
				<form action="" class="form" method="post" name="frm_Comments">
				<fieldset>
					<legend>Your details</legend>
					<table class="form">
						<tbody>
							<tr>
								<td class="control">
									<label for="SenderName">Your Name *</label>
								</td>
								<td>
									<input class="singletextinput" name="SenderName" type="text"/>
								</td>
							</tr>
							<tr>
								<td class="control">
									<label for="SenderDept">Your Department</label>
								</td>
								<td>
									<input class="singletextinput" name="SenderDept" type="text"/>
								</td>
							</tr>
							<tr>
								<td class="control">
									<label for="SenderEmail">Your E-mail address*</label>
								</td>
								<td>
									<input class="singletextinput" name="SenderEmail" type="text"/>
								</td>
							</tr>
							<tr>
								<td class="control">
									<label for="SenderPhone">Your Phone number</label>
								</td>
								<td>
									<input class="singletextinput" name="SenderPhone" type="text"/>
								</td>
							</tr>
						</tbody>
					</table>
				</fieldset>
				<fieldset>
					<legend>Your comments</legend>
					<table class="form">
						<tbody>
							<tr>
								<td class="control">
									<label for="SenderComments">Enter your comments *</label>
								</td>
								<td>
									<textarea class="multitextinput" name="SenderComments" type="text"></textarea>
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<input id="submit" type="submit" value="submit"/>
								</td>
							</tr>
						</tbody>
					</table>
				</fieldset>
			</form>
			<p>some text</p>	
			</div>
		</div>
			<script type="text/javascript">
			//<![CDATA[
				CKEDITOR.replace( 'mainEditor',
					{
						skin : 'kama'
					});
			//]]>
			</script>
		</p>	
</body>
</html>

The form loads as expected in IE6 - IE8, but the form elements are stripped out in FF and Chrome.

Attachments (1)

8590.html (2.9 KB) - added by Jakub Ś 7 years ago.
corrected sample

Download all attachments as: .zip

Change History (8)

comment:1 Changed 7 years ago by Matti Järvinen

Could it be that <textarea ... type="text"></textarea> (there is no attribute type for textarea) or inputs that end without space before /> mess it up?

Just a guess.

Changed 7 years ago by Jakub Ś

Attachment: 8590.html added

corrected sample

comment:2 Changed 7 years ago by Jakub Ś

Keywords: forms firefox chrome removed
Status: newconfirmed
Version: 3.6.13.0

There are some errors in HTML but correcting them didn't change anything. Form tags are still stripped down.

This has been reproducible in Opera, Firefox, Webkit and IE9 from CKEditor 3.0. It works in IE6-8.

comment:3 Changed 7 years ago by Jakub Ś

Missed the most obvious part. Nested forms are invalid HTML.

If you remove the upper form everything works as expected.

What is more browser itself (without any CKEditor logic) removes the inner form when it goes through the HTML.

comment:4 in reply to:  3 Changed 7 years ago by Mike

Thanks for taking a look, I had a feeling that might be the case. I tried TinyMCE as well and was getting the same problems in the same places leaving the browser as the likely culprit. I'm upgrading a custom CMS which used FCK 1.0 and IE6, it utilised this quirk for it's form builder, has proved a massive pain to work around and get working with modern browsers.

In an attempt remove the invalid html, I have attempted using the div replacement method, but that results in a problem when using textareas, specifically when loading the editor anything after the closing textarea tag is rendered after the editor instance. This is limited to page loading and it all works fine when inserting a textarea and saving it.

So the solution I have settled on is using custom elements purely for editing purposes which get created on load of the page and removed when I save it. I've also made my main form conditional so it is only used to save the contents to the database and isn't present otherwise, which solves my problem.

Replying to j.swiderski:

Missed the most obvious part. Nested forms are invalid HTML.

If you remove the upper form everything works as expected.

What is more browser itself (without any CKEditor logic) removes the inner form when it goes through the HTML.

comment:5 Changed 7 years ago by Jakub Ś

In an attempt remove the invalid html, I have attempted using the div replacement method, but that results in a problem when using textareas, specifically when loading the editor anything after the closing textarea tag

http://cksource.com/forums/viewtopic.php?t=17605 - is this the problem you are talking about?

comment:6 Changed 7 years ago by Mike

That looks to be similar, been a couple of weeks since I tried it though so memory is a little vague following my christmas break.

comment:7 Changed 7 years ago by Jakub Ś

Resolution: invalid
Status: confirmedclosed

What is more browser itself (without any CKEditor logic) removes the inner form when it goes through the HTML.

If browser strips down the nested form then this means that CKEditor receives this reduced code. There is no way CKEditor can get to that code before the browser so it simply does not know about the missing form tag.

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