<!-- 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>