Bearded
Bearded

Reputation: 45

How to insert data into database with encoded HTML tags using JavaScript and PHP through rich text editor?

I am working on a project where I have to insert data into database using tinymce or ckeditor. But the problem is, the HTML tags are not getting inserted into database! Here is my codes.

My HTML

<form action="action.php" method="POST" id="dataForm">
    <textarea name="details" class="tinymce"></textarea>
    <button type="submit" id="dataBtn">Add Post</button>
    <div id="dataResult"></div>
</form>

My JavaScript

$('#dataBtn').click(function(){
    $.post(
    $('#dataForm').attr('action'),
    $('#dataForm').serializeArray(),
        function(result) {
            $('#dataResult').html(result);
        }
    );
});

My PHP

$details = $_POST['details'];

$flag  = false;
$error = [];
$valid = [];

if (!empty($details)) {
    $flag = true;
} else {
    $error[] = "Provide details!";
    $flag    = false;
}

if ($flag == true) {

    $query  = "INSERT INTO tbl_post(details)VALUES('$details')";
    $result = $db->insert($query); // $db is database class

    if ($result) {
        $valid[] = "Data added successfully!";
    } else {
        $error[] = "Something is not right! please try again later!";
    }

} else {
    $error[] = "Something went wrong!";
}

Data is getting inserted into database but without the rich text editor formatting or you can say without the HTML tags. I want to know what I have to do with my code to insert data with HTML tags. Thanks.

Upvotes: 0

Views: 914

Answers (1)

navnath
navnath

Reputation: 3714

Use tinymce.activeEditor.getContent() to get html content from tinymce editor

tinymce.init({
    selector: 'textarea',
    ...
});
  

$('#dataBtn').click(function(e){
    e.preventDefault();
    // to get html content from tinymce
    var myContent = tinymce.activeEditor.getContent();
    const data = $('#dataForm').serializeArray();
    data.push({name: 'details', value: myContent});

    $.post(
        $('#dataForm').attr('action'),
        data,
        function(result) {
            $('#dataResult').html(result);
        }
    );
});

In PHP

$details = json_decode($_POST['details'], true);

Demo

Upvotes: 1

Related Questions