Quill Rich Text Editor, Custom Toolbar — Free JS Snippet

<div class="qe-card">
  <div class="qe-head">
    <h3>Write a post</h3>
    <span class="qe-count" id="qeCount" aria-live="polite">0 / 500</span>
  </div>
  <div id="qeToolbar" class="qe-toolbar">
    <span class="ql-formats">
      <select class="ql-header"><option value="1">Heading</option><option value="2">Subheading</option><option selected>Normal</option></select>
    </span>
    <span class="ql-formats">
      <button class="ql-bold" aria-label="Bold"></button>
      <button class="ql-italic" aria-label="Italic"></button>
      <button class="ql-underline" aria-label="Underline"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-list" value="ordered" aria-label="Numbered list"></button>
      <button class="ql-list" value="bullet" aria-label="Bulleted list"></button>
      <button class="ql-blockquote" aria-label="Quote"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-link" aria-label="Link"></button>
      <button class="ql-clean" aria-label="Clear formatting"></button>
    </span>
    <span class="ql-formats">
      <button type="button" class="qe-custom" id="qeSig" title="Insert signature">&#9998; Sign</button>
    </span>
  </div>
  <div id="qeEditor"></div>
  <div class="qe-tabs" role="tablist">
    <button type="button" role="tab" aria-selected="true" data-v="html">HTML output</button>
    <button type="button" role="tab" aria-selected="false" data-v="delta">Delta (JSON)</button>
  </div>
  <pre class="qe-out" id="qeOut"></pre>
</div>

body { background: #f4f5f9; padding: 22px; font-family: system-ui, sans-serif; }
.qe-card { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid #e0e3ee; border-radius: 16px; padding: 18px; box-shadow: 0 8px 24px rgba(30,30,80,.06); }
.qe-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.qe-head h3 { margin: 0; font-size: 16px; color: #12152b; }
.qe-count { font: 700 12px/1 system-ui, sans-serif; color: #4b5270; background: #eef0f8; padding: 5px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.qe-count.warn { background: #fef3c7; color: #92400e; }
.qe-count.full { background: #fee2e2; color: #991b1b; }
.qe-toolbar.ql-toolbar.ql-snow { border: 1px solid #d9dced; border-radius: 10px 10px 0 0; background: #f8f9fd; padding: 8px; }
#qeEditor.ql-container.ql-snow { border: 1px solid #d9dced; border-top: 0; border-radius: 0 0 10px 10px; font-size: 15px; }
#qeEditor .ql-editor { min-height: 150px; max-height: 190px; overflow-y: auto; line-height: 1.6; color: #1b2033; }
#qeEditor .ql-editor.ql-blank::before { color: #9aa1bd; font-style: normal; }
.qe-custom { width: auto !important; padding: 0 10px !important; font: 700 12.5px/1 system-ui, sans-serif; color: #4f46e5 !important; }
.qe-tabs { display: flex; gap: 4px; margin-top: 14px; }
.qe-tabs button { font: 700 12px/1 system-ui, sans-serif; color: #5b6279; background: #f0f2f8; border: 0; border-radius: 8px 8px 0 0; padding: 8px 12px; cursor: pointer; }
.qe-tabs button[aria-selected="true"] { background: #1c1f2e; color: #e6e9f7; }
.qe-out { margin: 0; padding: 12px 14px; background: #1c1f2e; color: #b8f0d0; border-radius: 0 10px 10px 10px; font: 12.5px/1.55 ui-monospace, Menlo, monospace; max-height: 130px; overflow: auto; white-space: pre-wrap; word-break: break-word; }

const LIMIT = 500;

const quill = new Quill('#qeEditor', {
  theme: 'snow',
  placeholder: 'Start writing... try selecting text and using the toolbar.',
  // A container selector replaces the default toolbar with the markup above, so it can be restyled freely.
  modules: { toolbar: { container: '#qeToolbar' } },
  // Only allow the formats the toolbar offers, so pasted content cannot smuggle in fonts and colours.
  formats: ['header', 'bold', 'italic', 'underline', 'list', 'blockquote', 'link'],
});

quill.setContents([
  { insert: 'Shipping notes' },
  { insert: '\n', attributes: { header: 1 } },
  { insert: 'This release adds ' },
  { insert: 'faster search', attributes: { bold: true } },
  { insert: ' and a redesigned settings page.\n' },
  { insert: 'Search is now ' },
  { insert: 'typo tolerant', attributes: { italic: true } },
  { insert: '\n', attributes: { list: 'bullet' } },
  { insert: 'Settings are grouped by task\n', attributes: {} },
]);

const countEl = document.getElementById('qeCount');
const out = document.getElementById('qeOut');
let view = 'html';

// Quill always keeps a trailing newline, so subtract it from the length.
function length() { return quill.getLength() - 1; }

function render() {
  const n = length();
  countEl.textContent = n + ' / ' + LIMIT;
  countEl.className = 'qe-count' + (n > LIMIT ? ' full' : n > LIMIT * 0.9 ? ' warn' : '');
  out.textContent = view === 'html'
    ? quill.root.innerHTML
    : JSON.stringify(quill.getContents(), null, 2);
}

quill.on('text-change', function (delta, old, source) {
  // Enforce the limit by trimming what was just typed or pasted, then let the event fire again.
  if (length() > LIMIT) quill.deleteText(LIMIT, quill.getLength(), 'silent');
  render();
});

// A custom toolbar button: insert a signature at the cursor (or the end) and move the cursor past it.
document.getElementById('qeSig').addEventListener('click', function () {
  const range = quill.getSelection(true);
  const at = range ? range.index : quill.getLength() - 1;
  const sig = '\n— The Product Team';
  quill.insertText(at, sig, { italic: true }, 'user');
  quill.setSelection(at + sig.length, 0, 'user');
});

document.querySelectorAll('.qe-tabs button').forEach(function (b) {
  b.addEventListener('click', function () {
    view = b.dataset.v;
    document.querySelectorAll('.qe-tabs button').forEach(function (x) { x.setAttribute('aria-selected', String(x === b)); });
    render();
  });
});
render();