<p> tag was removed after pasteHTML()

Steps for Reproduction

Write 3 lines in the editor, and save the html content using innerHTML:

<p>line 1</p><p>line 2</p><p>line 3</p>

Then paste the content in the editor :

    this.editor.pasteHTML('<p>line 1</p><p>line 2</p><p>line 3</p>');
    // or
    this.editor.clipboard.dangerouslyPasteHTML('<p>line 1</p><p>line 2</p><p>line 3</p>');

I don’t want to use getContent method as it does not preserve extra html code (in a more complex example, you may want to insert an iframe or some pre-formated html code)

Expected behavior:

HTML content is preserved including

tags

Actual behavior:

tags have been stripped out

(tricky) workaround for my use case:

To paste:

const quillHtmlContent = '<p>line 1</p><p>line 2</p><p>line 3</p>'.replace(new RegExp('<p><br></p>', 'g'), '<br/>').replace(new RegExp('<p>', 'g'), '<p><br/>').replace('<p><br/>', '<p>');

this.editor.pasteHTML(quillHtmlContent);

To copy:

    let htmlContent = this.editorContentHtmlElement.innerHTML;

    if (htmlContent === '<p><br/></p>') {
      htmlContent = null;
    } else {
      htmlContent = htmlContent.replace(new RegExp('<p><br/>', 'g'), '<p>')
    }
  }

Platforms:

firefox, chrome, and probably others

Version:

1.3.6

[benbro]

You need to use getContents and setContents. You can read about Delta.

[Toub]

Thanks, nice read!

Also discovered the following usefully repository mentioned in the blog post (should be linked from main repository): https://github.com/quilljs/awesome-quill