How to insert html with style (css) to quillJS. I have html like:

var data = '<p style="color: #f00">tesst</p>';

or

var data = '<style> .pp { color: #0f0;} </style>
<p class="pp">tesst</p>';

i paste it by

quill_arr[$('#docbody').attr('quill-id')].clipboard.dangerouslyPasteHTML(data);

text load but format is:

<p>tesst</p>

without all styles. Please help.

How to insert html with style (css) to quillJS. I have html like:

var data = '<p style="color: #f00">tesst</p>';

or

var data = '<style> .pp { color: #0f0;} </style>
<p class="pp">tesst</p>';

i paste it by

quill_arr[$('#docbody').attr('quill-id')].clipboard.dangerouslyPasteHTML(data);

text load but format is:

<p>tesst</p>

without all styles. Please help.

• javascript
• jquery
• quill

• stackoverflow./a/56846200/4051471 – shrys Commented Jul 12, 2019 at 8:09
• @shrys this is not the solution for me – Kaker Commented Jul 12, 2019 at 9:09

1 Answer 1

Putting a <span> with the styles inside a <p> seemed to work.

var data = '<p><span style="color: red;">test</span></p>'
quill.clipboard.dangerouslyPasteHTML(data);

Checkout this

<!-- Include stylesheet -->
<link href="https://cdn.quilljs./1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor"></div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs./1.3.6/quill.js"></script>

<script>
  // Initialize Quill editor
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
  
  // Insert HTML with style
  var data = '<p><span style="color: red;">Hello World!</span></p>'
  quill.clipboard.dangerouslyPasteHTML(data);
</script>