What Trix Does Better than Quill

Trix and Quill are open-source rich text editors. There are two key areas in which Trix excels over Quill:

• Clipboard
• Uploads

Clipboard

When you paste HTML into Quill, it gets inserted as is into the page before it is sanitized and processed.

This can cause errors on your page depending on what users paste into Quill:

• If your page has a MutationObserver that listens for newly inserted elements, that can trigger JavaScript errors. For example, if the pasted HTML includes a reference to a Stimulus controller, then Stimulus will execute the connect function in the controller which can cause JavaScript errors like Missing target element.

• If the pasted HTML includes an iframe, then the browser will attempt to load the src. Depending on the content security policy, this can cause errors like Refused to display 'https://oak-hickory.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin' and an error box will display in the Quill editor:

  

This can cause headaches if you monitor client errors with a tool like Airbrake.

In Trix, a new document is created with document.implementation.createHTMLDocument and the clipboard data is placed there first where it is sanitized. Forbidden elements like iframe and forbidden attributes like data-* are removed before the rest of the pasted content is inserted into the page.

Uploads

The way that Quill handles image uploads also has issues:

• Quill puts pasted content into the contenteditable element. But Safari doesn't allow files to be pasted or dragged into a contenteditable element. So pasting and drag-and-drop isn't functional at all in Quill for Safari.

• In other browsers like Chrome, pasting or dragging files into Quill will insert a huge thumbnail of the file type instead of inserting the file content:

  

Additionally, Quill embeds the full image file content as base64-encoded data within an img tag. This means that all image data is sent to the server in a single request when the form is submitted. And the raw image data is mixed in with the rich text. But we typically want to store images on a blob server instead of within a relational database. We don't want the image data size to exceed SQL column limits and we want images to be able to load in separate requests when the rich text is presented.

In Trix, paste and drag-and-drop work out of the box in all major browsers. Managing how uploads are processed does require some extra work, but their attachment example provides enough details to get started. Trix allows for asynchronous uploads that display a progress bar.

The Quill guides include a comparison with Trix that notes how Quill offers more formats and is easier to customize and style. But the way Trix manages pasted content and image uploads outweighs these other minor differences.