ASPBlogBrainOrdure/app/views/Posts/new.asp

<div class="row">
  <div class="col-lg-8">
    <div class="card shadow-sm">
      <div class="card-body">
        <h1 class="h3 mb-4">New Post</h1>

        <form method="post" action="<%= PostsUrl() %>">
          <div class="mb-3">
            <label class="form-label" for="Title">Title</label>
            <input class="form-control" type="text" id="Title" name="Title" required>
          </div>

          <div class="mb-3">
            <label class="form-label" for="Summary">Summary</label>
            <textarea class="form-control" id="Summary" name="Summary" rows="3"></textarea>
          </div>

          <div class="mb-3">
            <label class="form-label" for="BodyEditor">Body</label>
            <input type="hidden" id="Body" name="Body" value="">
            <div class="editor-shell">
              <div id="BodyEditor" class="rich-editor" aria-label="Post body editor"></div>
            </div>
            <div class="form-text">Use the toolbar to format the post or add an AI-generated image.</div>
          </div>

          <div class="mb-4">
            <label class="form-label" for="CategoryID">Category ID</label>
            <input class="form-control" type="number" id="CategoryID" name="CategoryID" min="0" value="0">
          </div>

          <div class="d-flex gap-2">
            <button class="btn btn-primary" type="submit">Create Post</button>
            <a class="btn btn-outline-secondary" href="<%= PostsUrl() %>">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
<script>
  (function () {
    if (!window.Quill) return;

    var bodyInput = document.getElementById('Body');
    var bodyEditor = document.getElementById('BodyEditor');

    bodyEditor.innerHTML = bodyInput.value || '';

    var quill = new Quill(bodyEditor, {
      theme: 'snow',
      modules: {
        toolbar: {
          container: [
            [{ header: [1, 2, 3, false] }],
            ['bold', 'italic', 'underline', 'blockquote', 'code-block'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link', 'image', 'clean']
          ]
        }
      }
    });

    var toolbar = quill.getModule('toolbar').container;
    var aiButton = document.createElement('button');
    aiButton.type = 'button';
    aiButton.className = 'btn btn-sm btn-outline-secondary ms-2 ql-aiimage';
    aiButton.innerHTML = '<i class="bi bi-image me-1"></i>AI Image';
    aiButton.addEventListener('click', function () {
      var prompt = window.prompt('Describe the image to generate with AI');
      if (!prompt) return;
      var url = 'https://gen.pollinations.ai/image/' + encodeURIComponent(prompt);
      var range = quill.getSelection(true) || { index: quill.getLength() };
      quill.insertEmbed(range.index, 'image', url, Quill.sources.USER);
      quill.insertText(range.index + 1, '\n', Quill.sources.SILENT);
      quill.setSelection(range.index + 2, Quill.sources.SILENT);
    });
    toolbar.appendChild(aiButton);

    var form = bodyInput.closest('form');
    form.addEventListener('submit', function () {
      bodyInput.value = quill.root.innerHTML;
    });
  })();
</script>