<!-- QuillJS CDN -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<!-- Quill Image Resize Module CDN -->
<script src="https://cdn.jsdelivr.net/npm/quill-image-resize-module@3.0.0/image-resize.min.js"></script>
<!-- Quill Editor Container -->
<div id="quill-editor-container" style="height: 500px; border: 1px solid #ddd;"></div>
<script>
// Add the ImageResize module to Quill
Quill.register('modules/imageResize', ImageResize);
// Initialize Quill with the image resize module
var quill = new Quill('#quill-editor-container', {
theme: 'snow',
modules: {
toolbar: {
container: [
[{ 'font': [] }, { 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
['link', 'image', 'video'],
[{ 'align': [] }],
['clean']
],
handlers: {
// Custom image handler to embed via URL
image: function() {
const imageUrl = prompt('Enter the image URL');
if (imageUrl) {
const range = this.quill.getSelection();
this.quill.insertEmbed(range.index, 'image', imageUrl);
}
}
}
},
imageResize: {} // Enable image resizing module
}
});
</script>
<!-- Styles for Editor -->
<style>
#quill-editor-container {
height: 500px;
width: 100%; /* Set to 100% width */
max-width: 1200px; /* Optionally, limit the max width */
padding: 10px;
border: 1px solid #ddd;
}
</style>
Comments