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

Question

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.

To answer this it would be essential really to see the PHP code used to do the inserts/ — Professor Abronsius
– Professor Abronsius, Commented Oct 25, 2021 at 10:40
Follow this article, You detail column in DB should be something like details text COLLATE utf8_unicode_ci NOT NULL, — navnath
– navnath, Commented Oct 25, 2021 at 10:58
@navnath the link you shared, yes that is possible. But, if you use JavaScript to send the input values to your PHP file then the HTML tags are getting removed automatically before it's reaching to your PHP script. I am looking for a solution where I can keep the HTML tags while it's passing JavaScript. — Bearded
– Bearded, Commented Oct 25, 2021 at 11:12
@Bearded I think $('#dataForm').serializeArray will not give value from textarea as html, instead to get content from tinymce do like var details = tinymce.activeEditor.getContent() then pass in post request. — navnath
– navnath, Commented Oct 25, 2021 at 11:18

navnath · Accepted Answer · 2021-10-25 11:42:01Z

1

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

edited Oct 25, 2021 at 11:42

answered Oct 25, 2021 at 11:30

navnath

3,7241 gold badge13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bearded Over a year ago

Thank you very much, it's working perfectly. but $details = json_decode($_POST['details'], true); giving me an empty textarea. So I used $details = $_POST['details']; and FILTER_SANITIZE_STRING also FILTER_SANITIZE_SPECIAL_CHARS

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related