CODEWITHSUNDEEP
javascriptreactjsrich-text-editorquill
Shuvo Habib
Shuvo Habib

Reputation: 2125

How do I integrate uploading Files(pdf, doc etc) via Quill JS Rich Text Editor?

By default, Quill supports the embedding format like Image, Video and Formula. How can I embed pdf or doc file by Quill Editor?

Upvotes: 8

Views: 12984

Answers (3)

SELA
SELA

Reputation: 6858

Embedding PDF or DOC files directly into Quill might not be as straightforward, as these file types are not natively supported for direct embedding in the same way as images or videos

  1. Convert to Images

You might need to convert each page of the PDF or DOC file into an image (e.g., PNG or JPEG) and then embed these images into Quill.

  1. Convert to HTML or Markdown:

Convert the content of the PDF or DOC file to HTML or Markdown, and then use Quill to handle the HTML or Markdown content.

  1. Embed in an Iframe

If the PDF or DOC file is hosted online, you can embed it in Quill using an iframe. Like below :

<div id="editor-container"></div>

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
  var quill = new Quill('#editor-container', {
    theme: 'snow'
  });

  // Assuming the PDF or DOC file is hosted online
  var embedCode = '<iframe src="https://example.com/path/to/your/document.pdf" width="600" height="400"></iframe>';
  quill.clipboard.dangerouslyPasteHTML(embedCode);
</script>

Note : This is a bit of Hacky design use with caution

Upvotes: 0

K J
K J

Reputation: 11857

This is always possible in a HTML editing window HOWEVER same as trying to edit a PDF it is worse than useless as it leads to the temptation to attempt more.

enter image description here

So consider what is happening is that like any active HTML there needs to be two PORT holes into another dimension or two. So that this HTML or those contents are not compromised there is a firewall Surround that Flaming Edge thus you cannot scale or otherwise alter / access those contents.

You might scroll about a bit as the frame has sliders or text tab controls, but it will lead balloon into disappointment as to what can be used.

In a HTML based editor the page code MUST be HTML it cannot be DOC or PDF or editable image without conversion and import as HTML.

To "embed" a PDF in for example an MS Office Document only an image of the front page is showing and the whole document attached to end of file. However MS Word does have the ability to convert on import and edit a PDF contents as if it was a word document, then it can be saved as an HTML file.

Upvotes: 0

Mike T
Mike T

Reputation: 614

It looks like the ability to embed PDF documents into Quill is not supported.

See https://github.com/quilljs/quill/issues/959

For doc files, it looks like there is an open issue:

See https://github.com/quilljs/quill/issues/2157

Upvotes: 0

Related Questions