You need to knock out the type definitions from that code to have it run:
function saveToServer(file: File) {
becomes:
function saveToServer(file) {
and
function insertToEditor(url: string) {
becomes:
function insertToEditor(url) {
Having done that, change editor to whatever you have named your Quill instance (quill in my case):
quill.getModule('toolbar').addHandler('image', () => {
selectLocalImage();
});
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Full Editor - Quill Rich Text Editor</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" />
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css" />
<style>
body > #standalone-container {
margin: 50px auto;
max-width: 720px;
}
#editor-container {
height: 350px;
}
</style>
</head>
<body>
<div id="standalone-container">
<div id="toolbar-container">
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>
<span class="ql-formats">
<button class="ql-direction" value="rtl"></button>
<select class="ql-align"></select>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-video"></button>
</span>
</div>
<div id="editor-container"></div>
<br />
<center>
<form method="POST" action="post.asp" name="mainform">
<input type="hidden" id="myHtml" name= "myHtml">
<input type="submit" value="Submit">
</form>
</center>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
const editor = document.getElementById('editor-container');
const hiddenInput = document.getElementById('myHtml');
const form = document.forms.mainform;
const quill = new Quill(editor, {
modules: {
syntax: true,
toolbar: '#toolbar-container'
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
form.addEventListener('submit', function(e){
e.preventDefault();
hiddenInput.value = editor.firstChild.innerHTML
this.submit();
});
function selectLocalImage() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.click();
// Listen upload local image and save to server
input.onchange = () => {
const file = input.files[0];
// file type is only image.
if (/^image\//.test(file.type)) {
saveToServer(file);
} else {
console.warn('You could only upload images.');
}
};
}
function saveToServer(file) {
const fd = new FormData();
fd.append('image', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000/upload/image', true);
xhr.onload = () => {
if (xhr.status === 200) {
// this is callback data: url
const url = JSON.parse(xhr.responseText).data;
insertToEditor(url);
}
};
xhr.send(fd);
}
function insertToEditor(url) {
// push image url to rich editor.
const range = editor.getSelection();
editor.insertEmbed(range.index, 'image', `http://localhost:9000${url}`);
}
quill.getModule('toolbar').addHandler('image', () => {
selectLocalImage();
});
</script>
</body>
</html>
You’ll need to adapt the path to your server within the insertToEditor function.
HTH
