Inserting text into Quill from database

Question

I store text in my database and I want to allow users to edit it. I want to retrieve the text from the database and insert it into the Quill editor so that the user can change it and then reupload it. How can I retrieve data from the database and insert it into the Quill editor?

This is how I get the data from the database

if(isset($_GET['articleId'])){
    $username = noHTML($_SESSION['username']);
    $articleId = noHTML($_GET['articleId']);
    $sqlbefore = $db->prepare('SELECT `username`, `title`, `description`, `text` FROM articles WHERE username = ? AND artId = ?');
    $sqlbefore->bind_param('si', $username, $articleId);
    $sqlbefore->execute();
    $result = $sqlbefore->get_result();
    $row = $result->fetch_assoc();
    if($username != $row['username']){
        header("location:index.php");
    }

    $titleValue = $row['title'];
    $descriptionValue = $row['description'];
    $textValue = $row['text'];

}

Then I use the textValue variable to place it into a hidden div with display none, to then set the text into the quill editor.

var quill = new Quill('#editor', {
        modules: { toolbar: toolbarOptions },
        theme: 'snow'
    });
    var text = $('#hidden_text').html();
    quill.setText(text);

The editor displays the follwing string:

<p>Normal text</p><h1>Header Text</h1>

Instead of displaying it like the tags describe it.

How can I set the text so that it shows up like the HTML tags describe it?

score 1 · Answer 1 · answered Mar 31 '20 at 02:35

This does work, but of course, I am still using a hidden div to pass the data from PHP to jQuery. If anyone has any possible improvements in terms of security or coding please comment.

var quill = new Quill('#editor', {
        modules: { toolbar: toolbarOptions },
        theme: 'snow'
    });
    var text = $('#hidden_text').html();
    quill.clipboard.dangerouslyPasteHTML(0,text);

Inserting text into Quill from database

1 Answers1