Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#8637 closed Bug (invalid)

CKeditor isn't picked up by jQuery :input

Reported by: fooquency Owned by:
Priority: Normal Milestone:
Component: General Version: 3.6.2
Keywords: Cc:

Description

I wish to add the 'Are you sure you want to leave this page' dialog to avoid page editors losing material accidentally.

jQuery provides a useful :input selector, which means that a change to any form input/textarea/select/button widget can be used to trigger the dialog using:

function removeCheck() { window.onbeforeunload = null; }
$(document).ready(function() {
    $(':input').one('change', function() {
	window.onbeforeunload = function() {
            return 'Leaving this page will cause edits to be lost. Press the submit button on the page if you wish to save your data.';
        }
    });
    $('input[type=submit]').click(function() { removeCheck() });
});

This certainly works for normal textareas.

However, when CKeditor is added, this doesn't then get picked up:

<html>
<head>
	<title>richtext</title>
	<script type="text/javascript" src="http://ckeditor.com/apps/ckeditor/3.6.2/ckeditor.js?1325679318"></script>
	
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript">
				function removeCheck() { window.onbeforeunload = null; }
				$(document).ready(function() {
				    $(':input').one('change', function() {
						window.onbeforeunload = function() {
				            return 'Leaving this page will cause edits to be lost. Press the submit button on the page if you wish to save your data.';
				        }
				    });
				    $('input[type=submit]').click(function() { removeCheck() });
				});
	</script>

	
</head>
<body>
	<!-- http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Integration -->
	<form method="post">
		<p>
			Editor:<br />
			<textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
			<script type="text/javascript">
				CKEDITOR.replace( 'editor1' );
			</script>
			
			<textarea name="normaltextarea">Normal textarea</textarea>
		</p>
		<p>
			<input type="submit" />
		</p>
		<p><a href="http://www.google.com/">Link elsewhere</a></p>
	</form>


</body>
</html>

Obviously I can't be sure if this is a CKeditor bug or a jQuery bug, or is by design on either side.

Change History (2)

comment:1 Changed 8 years ago by Jakub Ś

Resolution: invalid
Status: newclosed

When using CKEditor with jQuery one should use jQuery adapter for it. Currently there is one bug I’m aware of - #8530 (Toolbar save button does not sent updated content). If you are using that button a lot then I’m not recommending the adapter. If not please see - http://ckeditor.com/blog/CKEditor_for_jQuery, there is also jQuery adapter sample file in _samples folder of downloaded CKEditor.


Now back to the ticket:
Editor is created upon an input element (textarea). After that its "onchange" listener will not be triggered anymore (not jQuery dependent) as the original element is hidden from view.

In order to check the modified state of this control, we've introduced the editor::checkIsDirty api. Please see: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#checkDirty

You should rather leave window.onbeforeunload and display message provided that editor editor is dirty (checkDirty returns true).


I wish to add the 'Are you sure you want to leave this page' dialog to avoid page editors losing material accidentally.

Perhaps I could recommend an alternative – ajax autosave plugin Please see: http://cksource.com/forums/viewtopic.php?f=18&t=24128

comment:2 Changed 8 years ago by Jakub Ś

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