I've been trying to integrate ckeditor in my php website, and I've encountered the following issue.
Essentially, the content in ckeditor wouldn't appear in the $_POST variable after submitting the form.
I looked the issue up and apparently one has to update the form field with a small piece of code.
So I wrote the corresponding script and linked it to the submit button in order to get the result I want, but $_POST still shows up as empty.
I'm inexperienced with Javascript so the error probably lies there. Any ideas?
cktest.php:
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="http://localhost/ECLIPSEPHP/ckeditor/ckeditor.js"></script>
</head>
<body>
<form action = <?php echo $_SERVER['PHP_SELF']
?>>
<textarea name="test" id="test" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<input type = "submit" name = 'submitButton' id = 'submitButton' value = 'Submit'>
<script>
// Replace the <textarea id="test"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'test' );
</script>
<script type = "text/javascript" src = "http://localhost/ECLIPSEPHP/js/update.js"></script>
</form>
</body>
</html>
<?php
var_dump($_POST);
//echo $_POST['test'];
?>
The javascript supposed to handle the onclick event :
function updateAllMessageForms()
{
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
}
var submitButton = document.getElementById('submitButton');
submitButton.onclick = updateAllMessageForms;
There are quite a lot of problems with that code. The first thing to check is to add a method to that form tag:
method="post"
.See what
<form action = <?php echo $_SERVER['PHP_SELF'] ?>>
renders. It looks like it could be a wrong. I'm guessing it should be more like<form action="<?php echo $_SERVER['PHP_SELF'] ?>">
.Don't use
'
for HTML attribute delimiters, use"
instead:'submitButton'
-->"submitButton"
.If you edit the updateElement a little:
CKEDITOR.instances[instance].updateElement(); alert(1);
- do you see the alert? If not, that code is not being called and you need to edit it so that it is.Don't add spaces between your attribute name, the equals symbol and the value. That looks very strange and could be interpreted wrong or it could send Internet Explorer into quirks mode. Try to change this style:
type = "submit"
totype="submit"
and keep up with that style.Remember that it's often a good idea to look at the Rendered source in the browser to see what the browser actually gets. Happy coding!