search

slab / quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility
https://quilljs.com
BSD 3-Clause "New" or "Revised" License
43.14k stars 3.35k forks source link

HTML Breakage When Pasting into Quill.js #4102

Open Vittor-Emanoel opened 5 months ago

Vittor-Emanoel commented 5 months ago

Hello!

I'm encountering an issue while developing a project using Quill.js with React. When pasting emails and stylized tables, the HTML gets cleaned, thus losing all styling. What is the best way that Quill offers for proper presentation in these cases?

I tested the 'quill-paste-smart' library and it didn't help 😒😭

Steps for pasting email

Reproduction

  1. Open the link https://codepen.io/DeV-e-m-r-/pen/XWQZJaQ
  2. Copy the HTML
  3. Paste into Quill

Expected

  1. Retain the presentation identical to the email (Gmail/Outlook)

Observed

  1. Breaks the formatting as shown in the video

Sample video of pasting the email: https://github.com/quilljs/quill/assets/55211291/95576dd5-6a42-451c-a292-e5a43e97670b

Steps for pasting the table

Reproduction

  1. Open the link https://codepen.io/DeV-e-m-r-/pen/KKYQwQx
  2. Copy the HTML
  3. Paste into Quill

Expected

  1. Retain the presentation identical to the page (https://www.htmlprogressivo.net/2013/12/Tabela-dentro-de-tabela-cor-imagem-plano-de-fundo-background.html)

Observed

  1. Breaks the formatting as shown in the video

Sample video of pasting the email: https://github.com/quilljs/quill/assets/55211291/11351818-d670-4a00-9f08-928991e86ff9

chienweiluo commented 5 months ago

same issue here...

zehawki commented 4 months ago

Perhaps you have a basic misunderstanding of how RTE work. Presentation on a webpage is controlled by that page's CSS. Thats not going to come into quill (or any editor for that matter). Only the pure HTML tags with content will come in, as they should. HTML tags are further controlled by which tags are actually allowed to be pasted in (formatting)