quill.js integration with laravel 5.3 forum site
<p>I am looking for a way to integrate quill.js into my site but the support they give is non-existent or clear as mud. Can someone help me?</p>

<p>Below is my code, all currently inline so to make it easier to see everything. I have managed to get quill to run on the page and i can edit text with it, however when i submit the form it does not submit the values of the editors as it should...</p>

<p>The editor should pass it's contents to a hidden input and submit it's contents however when i am submitting the form the inputs are not populated.</p>

<p>If anyone knows what I am doing wrong then I am all ears, and if someone has a better way to attempt the problem then again I am open to suggestion (btw the form is currently set to GET so i can easily examine what is being passed but the already written controller handles the variables being POST-ed.</p>

<pre><code>&lt;div class="row" style="margin-right: 0px; margin-left: 0px;"&gt;
&lt;div class="col-md-6 col-md-offset-3"&gt;

    &lt;!-- Title and First Post --&gt;
    &lt;div class="jumbotron"&gt;

        &lt;form method="get" action="/forum/create_post" id="create_post"&gt;
          @if (count($errors))
          &lt;div style="padding: 10px;"&gt;
            &lt;div class="container-fluid" style="background-color: white;  padding: 10px;"&gt;
            &lt;ul&gt;
                @foreach ($errors-&gt;all() as $error)
                  &lt;li&gt;{{ $error }}&lt;/li&gt;
                @endforeach
            &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          @endif
          {{ csrf_field() }}
          &lt;div style="padding: 10px;"&gt;
          &lt;div class="container-fluid" style="background-color: white;  padding: 10px;"&gt;
          &lt;input name="title" type="hidden"&gt;
          &lt;div id="editor-title"&gt;{{ old('title') }}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
                &lt;!--&lt;h1&gt;&lt;label for="Title"&gt;Title&lt;/label&gt;&lt;/h1&gt;
                &lt;input class="form-control" name="title" type="text" placeholder="Your Title Here..."&gt;
            &lt;h1&gt;&lt;label for="body"&gt;Content&lt;/label&gt;&lt;/h1&gt;--&gt;
            &lt;div style="padding: 10px;"&gt;
            &lt;div class="container-fluid" style="background-color: white;  padding: 10px;"&gt;
            &lt;input name="body" type="hidden"&gt;
            &lt;div id="editor-body"&gt;{{ old('body') }}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
            &lt;button class="btn btn-primary" type="submit"&gt;Save Profile&lt;/button&gt;
        &lt;/form&gt;
   &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
 var bodyquill = new Quill('#editor-body', {
modules: {
  toolbar: [
    ['bold', 'italic', 'underline'],
    ['link', 'blockquote', 'code-block', 'image'],
    [{ list: 'ordered' }, { list: 'bullet' }]
  ]
},
placeholder: 'Compose an epic post...',
theme: 'snow'
});
var titlequill = new Quill('#editor-title', {
modules: {
},
placeholder: 'Title Here...',
theme: 'bubble'
});

var form = document.querySelector('form');
form.onsubmit = function() {
var title = document.querySelector('input[name=title]');
   title.value = JSON.stringify(titlequill.getContents());

var body = document.querySelector('input[name=body]');
  body.value = JSON.stringify(bodyquill.getContents());

  console.log("Submitted", $(form).serialize(), $(form).serializeArray());
// No back end to actually submit to!
alert('Open the console to see the submit data!')
return false;
};
&lt;/script&gt;
</code></pre>

<p>Thanks!</p>