How do I run this without NPM?
harshmandan opened this issue · 5 comments
I want to use this on a simple Html/JS page. I've tried fiddling with it but it doesn't seem to work.
Also if I want to use it in a browser how do I set the uploadURL?
Thanks!
I have update the readme with a section on how to use it with just script tags.
You can config where to upload the file when configuring the module.
Below is an example of using XHR to send the file to the server to save it and return a url to the hosted image.
var quill = new Quill(editor, {
modules: {
imageUploader: {
upload: file => {
return new Promise((resolve, reject) => {
const fd = new FormData();
fd.append("upload_file", file);
const xhr = new XMLHttpRequest();
xhr.open("POST", `${link-to-your-site}/api/files`, true);
xhr.onload = () => {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
resolve(response.file_path);
}
};
xhr.send(fd);
});
}
}
}
});I just tested it. And it isn't working.
Here's the error:
quill.js:1987 quill Cannot import modules/imageUploader. Are you sure it was registered?
debug @ quill.js:1987
_import @ quill.js:1044
(anonymous) @ quill.js:1573
expandConfig @ quill.js:1572
Quill @ quill.js:1086
(anonymous) @ demo.html:37
quill.js:1987 quill Cannot load imageUploader module. Are you sure you registered it?
debug @ quill.js:1987
(anonymous) @ quill.js:1575
expandConfig @ quill.js:1572
Quill @ quill.js:1086
(anonymous) @ demo.html:37
quill.js:1987 quill Cannot import modules/imageUploader. Are you sure it was registered?
debug @ quill.js:1987
_import @ quill.js:1044
addModule @ quill.js:6056
(anonymous) @ quill.js:6049
init @ quill.js:6047
Quill @ quill.js:1113
(anonymous) @ demo.html:37
quill.js:6057 Uncaught TypeError: moduleClass is not a constructor
at Theme.addModule (quill.js:6057)
at quill.js:6049
at Array.forEach (<anonymous>)
at Theme.init (quill.js:6047)
at new Quill (quill.js:1113)
at demo.html:37
addModule @ quill.js:6057
(anonymous) @ quill.js:6049
init @ quill.js:6047
Quill @ quill.js:1113
(anonymous) @ demo.html:37
Here is the HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Quill Demo</title>
<!-- Theme included stylesheets -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" rel="stylesheet" />
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
</head>
<body>
<h3>
Demo of uploading an image to a server instead of base64 encoding images
</h3>
<!-- Create the editor container -->
<div id="editor">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="./dist/quill.imageUploader.min.js"></script>
<script type="text/javascript">
var quill = new Quill("#editor", {
// ...
modules: {
// ...
imageUploader: {
upload: file => {
return new Promise((resolve, reject) => {
const fd = new FormData();
fd.append("file", file);
const xhr = new XMLHttpRequest();
xhr.open("POST", `https://mywebsite.com/init/upload_img`, true);
xhr.onload = () => {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
resolve(response.url);
}
};
xhr.send(fd);
});
}
}
}
});
</script>
</body>
</html>
I made another slight change to fix this using only a script tag. Now at version 1.1.2 on npm.
There is a sample on CodeSandbox that you can play with.
The sandbox that you shared does not have the image upload button. Apparently, You didn't load the toolbar into the init of Quill. I changed that and it works flawlessly! Can't thank you enough.
Sorry about that, I did it in a rush without checking properly.
I've updated the CodeSandbox to add the missing toolbar options and show how to upload the image to a service.