Hi,
Can you post the code you currently have (i.e. a self-contained demo that I can run in my browser).
It’s hard to say what is wrong without seeing the source.
Here you go, thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<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: 650px;
}
</style>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 0px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-family: consolas,monospace;
position: absolute;
bottom: 25px;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<style>
body {
padding: 25px;
}
#bubble-container, #snow-container {
height: 300px;
margin-bottom: 10px;
}
.container {
display: flex;
}
.panel {
flex: 1;
margin-left: 25px;
margin-right: 25px;
}
</style>
</head>
<body bgcolor="4c659b">
<table border="0" align="center" width="700" cellspacing=0 bgcolor="ffffff"><tr><td>
<div id="standalone-container">
<div id="Div1">
<div id="Div2">
<div align=center id="toolbar-container">
<span class="ql-formats">
<select class="ql-size"></select>
<span class="ql-formats">
<div class="tooltip">
<span class="tooltiptext">Bold</span>
<button class="ql-bold"></button>
</div>
<div class="tooltip">
<span class="tooltiptext">Italic</span>
<button class="ql-italic"></button>
</div>
<div class="tooltip">
<span class="tooltiptext">Underline</span>
<button class="ql-underline"></button>
</div>
</span>
<span class="ql-formats">
<div class="tooltip">
<span class="tooltiptext">Text color</span>
<select class="ql-color"></select>
</div>
<div class="tooltip">
<span class="tooltiptext">Text color background</span>
<select class="ql-background"></select>
</div>
</span>
<span class="ql-formats">
<div class="tooltip">
<span class="tooltiptext">Intent Order by Number</span>
<button class="ql-list" value="ordered"></button>
</div>
<div class="tooltip">
<span class="tooltiptext">Intent Order by Bullets</span>
<button class="ql-list" value="bullet"></button>
</div>
</span>
<span class="ql-formats">
<div class="tooltip">
<span class="tooltiptext">Alignment Left, Center, Right</span>
<select class="ql-align">
<option value=""></option>
<option value="center"></option>
<option value="right"></option>
</select>
</div>
</span>
<span class="ql-formats">
<div class="tooltip">
<span class="tooltiptext">Hyperlink</span>
<button class="ql-link"></button>
</div>
<div class="tooltip">
<span class="tooltiptext">Image Upload</span>
<button class="ql-image"></button>
</div>
<div class="tooltip">
<span class="tooltiptext">Youtube Link</span>
<button class="ql-video"></button>
</div>
</span>
</div>
<div id="editor-container"></div>
<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/2.0.0-dev.2/quill.js"></script>
<script>
// Fetch content from database here
var editorContent = 'rs goes here';
var editor = document.getElementById('editor-container');
var hiddenInput = document.getElementById('myHtml');
var form = document.forms.mainform;
var quill = new Quill(editor, {
modules: {
table: true,
syntax: true,
toolbar: '#toolbar-container'
},
placeholder: 'Type here',
theme: 'snow'
});
quill.clipboard.addMatcher (Node.ELEMENT_NODE, (node, delta) => {
var plaintext = node.innerText;
var Delta = Quill.import('delta');
return new Delta().insert(plaintext);
});
var table = quill.getModule('table');
document.querySelector('#insert-table').addEventListener('click', function () {
table.insertTable(2, 2);
});
document.querySelector('#insert-row-above').addEventListener('click', function () {
table.insertRowAbove();
});
document.querySelector('#insert-row-below').addEventListener('click', function () {
table.insertRowBelow();
});
document.querySelector('#insert-column-left').addEventListener('click', function () {
table.insertColumnLeft();
});
document.querySelector('#insert-column-right').addEventListener('click', function () {
table.insertColumnRight();
});
document.querySelector('#delete-row').addEventListener('click', function () {
table.deleteRow();
});
document.querySelector('#delete-column').addEventListener('click', function () {
table.deleteColumn();
});
document.querySelector('#delete-table').addEventListener('click', function () {
table.deleteTable();
});
editor.firstChild.innerHTML = editorContent;
form.addEventListener('submit', function (e) {
e.preventDefault();
hiddenInput.value = editor.firstChild.innerHTML;
this.submit();
});
function selectLocalImage() {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.onchange = function () {
var file = input.files[0]; // file type is only image.
if (/^image\//.test(file.type)) {
saveToServer(file);
} else {
console.warn('You could only upload images.');
}
};
input.click(); // Listen upload local image and save to server
}
function saveToServer(file) {
var fd = new FormData();
fd.append('image', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'website', true);
xhr.onload = function () {
if (xhr.status === 200) {
var url = xhr.responseText;
insertToEditor(url);
}
};
xhr.send(fd);
}
function insertToEditor(url) {
// push image url to rich editor.
var range = quill.getSelection();
quill.insertEmbed(range.index, 'image', "website".concat(url));
}
quill.getModule('toolbar').addHandler('image', function () {
selectLocalImage();
});
</script>
</td></tr></table>
</body>
</html>The problem is that image-resize-module only works with Quill v1, whereas you are using v2.
One solution would be to drop back to Quill v1, but maybe that’ll break other functionality.
Alternatively, use this fork that has been updated to support Quill version 2.
Then you can do:
var quill = new Quill(editor, {
modules: {
table: true,
syntax: true,
toolbar: '#toolbar-container',
imageResize: {
// Any config here
}
},
placeholder: 'Type here',
theme: 'snow'
});
You can use this link to include the file directly in your page:
<script src="https://raw.rawgit.net/henriqueformiga/quill-image-resize-module-v2/master/image-resize.min.js"></script>
but I would recommend pulling in the whole library and accessing it as described in the docs:
<script src="/node_modules/quill-image-resize-module/image-resize.min.js"></script>
HTH
2 Likes
Ah, maybe that’s the problem I had with it, but not 100% sure. Thanks for noticing that!
It works good!
When I do that, do I want both scripts on the page you included or just the last one?
Should I be concerned that those links could be deleted? And if so, should I, or is it best to, download to a local file and then include the file that way?
Thanks for your help, I really appreciate it.
You only need image-resize.min.js, but it’s not a bad idea to grab a copy of the entire library. You can pull it in using npm (npm i quill-image-resize-module-v2), or just download the project as a ZIP file from GitHub).
But as mentioned, the only file you need to serve to your visitors is image-resize.min.js.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.