0

I want to return HTML to QuillJS editor.

It works this way:

var htmlToInsert = "<p>Line 1</p><p><br></p><p><strong>Bold line 2</strong></p>";
var editor = document.getElementsByClassName('ql-editor');
editor[0].innerHTML = htmlToInsert;

proper rendering

When I get the inner HTML from a textarea, Quill renders the full HTML markup:

var htmlToInsert = $('#textarea').html();
var editor = document.getElementsByClassName('ql-editor');
editor[0].innerHTML = htmlToInsert;

unwanted, full HTML markup

What am I doing wrong in scenario 2?

spacerabbit
  • 15
  • 4

2 Answers2

0

this code snippet works on me

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<div id="editor">
</div>
<textarea id="textarea"><p>Line 1</p><p><br></p><p><strong>Bold line 2</strong></p></textarea>
<button onclick="run()">Run</button>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
  var quill = new Quill('#editor', {
      theme: 'snow'
  });
  function run(){
      var htmlToInsert = 
      document.querySelector("#textarea").value;
      var editor = document.querySelector('#editor');
      editor.innerHTML = htmlToInsert;
  }
</script>
Mert Çelik
  • 334
  • 1
  • 10
  • unfortunately, this is still not working (I thought it worked but it was just caching). Still displays the full HTML markup in my case :( – spacerabbit Mar 14 '21 at 18:00
  • @spacerabbit can you edit the question with including not working code snipped ? – Mert Çelik Mar 14 '21 at 18:16
  • I tried it like this now, as proposed here: https://stackoverflow.com/a/46627801/12834237 Still the same bad result. `var quill = new Quill('#editor', { modules: { toolbar: [ [{ header: [1, false] }], ['bold', 'italic'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ] }, theme: 'snow' }); var htmlToInsert = document.querySelector("#div_hidden").innerHTML; quill.clipboard.dangerouslyPasteHTML(htmlToInsert); ` – spacerabbit Mar 14 '21 at 18:22
  • that code is working on my browser https://jsfiddle.net/1kdsa9vo/1/ what browser are you using ? – Mert Çelik Mar 14 '21 at 18:37
  • thanks for your support. I didn't mention that I grab from a textarea, now changed the question. Didn't think this could be the issue. – spacerabbit Mar 15 '21 at 07:28
0

The issue occurs when grabbing the inner HTML from a textarea. I now grab it from an input field value, which works. It needs to be a form element as I need to be capable to post the data.

spacerabbit
  • 15
  • 4