How to update CKEditor content on form submit – equivalent of OnAfterLinkedFieldUpdate FCKEditor

Often there is a need to do something with CKEditor content before it is saved in database or send somewhere. As OnAfterLinkedFieldUpdate event is missing in CKEditor I spend a lot of time triyng to find a solution which would substitute OnAfterLinkedFieldUpdate event from FCKeditor.

I had as well need that other events which could handle other inputs from form will remain so I had to use a tweak on top of event.preventDefault()

Here is the form:

<form id="my_form" action="submit.php" method="post" name="my_form">
   <textarea id="my_text" name="my_text"></textarea>
   <input id="submitForm" type="submit" name="submitForm" value="Submit" />
</form>

JavaScript:

var formSubmitted = false;
$("#submitForm").live('click', function(event) {
	if (formSubmitted === true) {
		formSubmitted = false;
		return;
	}
	event.preventDefault();
	//put here function to edit content == OnAfterLinkedFieldUpdate
	var editor = CKEDITOR.instances.my_text;
	var html = editor.getData();
	html.replace(searchvalue, newvalue);
	editor.setData(html);
	formSubmitted = true;
	$(this).trigger('click');
});

This solution will update the content of CKEditor but it will not prevent other functions which could process and manipulate other elements in the form.

2 thoughts on “How to update CKEditor content on form submit – equivalent of OnAfterLinkedFieldUpdate FCKEditor

  1. Thanks for the snippet, came in very handy.
    For long html values I had to move the second click into the setData callback like this:
    editor.setData(html, function() {$(this).trigger(‘click’);});

    Otherwise the post data was empty.

  2. Pingback: ckeditor and razor syntax templates - Adan

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.