php Question posted in
Official manual can be found here.

Php – How to get content from quill?

I built quill into my site, set up a database, prescribed JS code and a handler to send data to the database.

Everything works, but the "content" column always remains empty in the database.

Can you help me with this?

Form:

<form method="POST"> 
    <div class="container"> 
        <input type="text" name="heading" class="form-control title" placeholder="Heading" required/> 
    <br> 
    <div class="container-textarea"> 
        <div id="editor"></div> 
        <input type="hidden" name="content" id="content" value=""> 
    </div> 
    <br> 
    <button type="submit" name="upload" value="upload" class="btn btn-primary">Upload</button> 
    </div> 
</form>

Script:

var toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], //toggled buttons
    ['blockquote', 'code-block'],

    [{ 'header': 1 }, { 'header': 2 }], //custom button values
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'indent': '-1'}, { 'indent': '+1' }], //outdent/indent
    [{ 'direction': 'rtl' }], // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }], //custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    [{ 'color': [] }, { 'background': [] }], //dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],

    ['clean'] //remove formatting button
    ];

var quill = new Quill('#editor', {
    modules: {
    toolbar: toolbarOptions
    },
    theme: 'snow',
    });

var form = document.querySelector('form');
var contentField = document.getElementById('content');


form.addEventListener('submit', function(event) {
    event.preventDefault();
    var contents = quill.getContents();
    contentField.value = contents;
    form.submit();
    });

I’ve tried a lot of things, and getContents(); (seen above), and quill.root.InnerHTML; and other stuff.

Tags:

2

Answers


  1. 0

    quill.root.innerHTML should work. You can check this in the console of your browser. innerHTML starts with a lowercase i.

    If that doesn’t work, maybe you are selecting another form with document.querySelector('form'). In that case you should use an id instead.

    Login or Signup to reply.
  2. 0

    On form submission, Quill content is converted to JSON and stored in a hidden field.

    form.addEventListener('submit', function(event) {
    event.preventDefault();
    contentField.value = JSON.stringify(quill.getContents());
    form.submit();
});

    PHP decodes the JSON and handles the data, often storing it in a database.

    $content = json_decode($_POST['content'], true);
// Store $content in the database.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search