How can I get the values from CKEDITOR using POST in PHP?

Question

I have a trouble in getting the value of CKEDITOR in HTML. After inputting some HTML tags in the CKEDITOR and submitting it. There's no output from the POST response. Here's my code. I don't know if it some complication because i also used jquery-validation plugin.

HTML

<?php echo form_open('users/user/sendEmail', array('id' => 'send-mail-form', 'role' => 'form')); ?>
<div class="row row_field">
    <div class="col-md-12">
        <label for="editor">Email Body:</label>
        <textarea name="email_body" id="editor"></textarea>
    </div>
</div>

JS

$('#editor').ckeditor();

jquery-validation

$('#send-mail-form').validate({
    rules: {
        email_subject: {
            required: true,
            minlength: 15
        },
        email_body: {
            required: true,
            minlength: 50
        }
    },
    messages: {
        email_subject: {
            required: "The Email Subject is required",
            minlength: "The email subject shoud be 15 characters and above."
        },
        email_body: {
            required: "Email body is required",
            minlength: "The email body should be 5o characters and above."
        }
    },
    submitHandler: function(form) {
        form.submit(); //send data
    }
});

PHP server side

public function sendEmail() {

        fp($this->input->post()); //no output 

        fp(htmlentities($this->input->post('email_body'))); //no output also

Can you help me with this?

Answer 1

Try this:

<script>
    var data = CKEDITOR.instances.editor1.getData();

    // Your code to save "data", usually through Ajax.
</script>

Or

<?php
    $editor_data = $_POST[ 'editor1' ];   // where editor1 is the name of html element
?>

Reference Guide

Answer 2

Thanks for the help guys, I manage to solve it by downloading this small plugin http://ckeditor.com/addon/save

And I add the configuration in my js part.

config.extraPlugins = 'save';

And now I can get the CKEDITOR value.

Answer 3

你能试试这个方法吗

$details =  htmlentities($_POST['editor']);

Answer 4

Just try this and it works fine

 $("form[name='blog_form']").on("submit", function (e) {
    e.preventDefault();
    var editor_data = CKEDITOR.instances.editor.getData();  // editor is the textarea field's name
    $("form[name='blog_form'] textarea[name='editor']").val(editor_data);
    var data = new FormData(this);

You will get all the form's fields & their values and confirm with the network in the google console. like:

b_title: This is just a testing Title of the blog.
b_heading: This is the Heading of the Blog.
b_date: 2019-09-06
b_time: 17:00
b_excerpt: test
editor: <p>testing <strong>may be fine </strong>now with&nbsp; the <span 
style="color:#1abc9c"><span style="font-size:24px">TextEditor</span></span></p>
b_file: (binary)
b_tags: tags

we are now getting our texteditor value in the editor-key above.

On the PHP page you can just get the values like:

$blog = new Blog($db);

$blog->b_title = $_POST['b_title'];
$blog->b_heading = $_POST['b_heading'];
$blog->b_content = $_POST['editor'];  // ... and so on

Answer 5

The Mayank answer was right, but i've made a most flexible approach for this using "for in" syntax, you can make the following on your submitHandler, just before send the data:

submitHandler: function(form) {
    //Update textarea elements before send...
    for (let input in CKEDITOR.instances) {
        CKEDITOR.instances[input].updateElement();
    }

    form.submit(); //send data
}

And you got the correctly data on $_POST