I have an initialized quill with all its components and CSS. My problem is, I have an edit button on my page to load MySQL contents. When the user clicks the edit button the content should be available for user editing. I use quill for this purpose. Quill perfectly initialized and displaying the edit space and toolbar.
But not showing the contents inside the edit space. I have called the content through div as required and not through textarea, but for some reason, the content is not displayed. I don't know why?
Could anyone please help me figure out the reasons and a possible resolution.
<div style="height: 150px;" class="mb-0" data-toggle="quill" data-quill-placeholder="Enter description"> <div><h1>Hello World!</h1> <p>Some initial <strong>bold</strong> text</p> <p><br></p></div> </div>
<script> var editor = new Quill('[data-toggle="quill"]', { modules: { syntax: true, toolbar: true, theme: 'snow' }, placeholder: 'Compose an epic...', theme: 'snow' }); </script>
So, I figured the bug in my code.
I removed syntax: true, and added $(document).ready(function () {}); to the quill function. Its now working.