A notice editor needs a level-two heading, bold, and italic text. It does not need a full word-processing ribbon. The author should choose “Heading 2,” type the notice title, switch back to ordinary paragraph text, and save a document whose structure reflects those choices.
Define the controls before creating the editor
For a browser application that has loaded Quill 2 and its core stylesheet:
<div id="notice-toolbar" aria-label="Notice formatting">
<label>
Paragraph style
<select class="ql-header">
<option value="" selected>Paragraph</option>
<option value="2">Heading 2</option>
</select>
</label>
<button type="button" class="ql-bold" aria-label="Bold">Bold</button>
<button type="button" class="ql-italic" aria-label="Italic">Italic</button>
</div>
<div id="notice-editor"></div>
const quill = new Quill('#notice-editor', {
theme: null,
formats: ['header', 'bold', 'italic'],
modules: {
toolbar: '#notice-toolbar'
}
});
This example deliberately uses no visual theme, so the browser's native select and text-labeled buttons remain visible. Load the core CSS and apply your application's ordinary control styles. A Snow or Bubble theme can create additional styled controls, so inspect the resulting interface if adapting this markup to a theme rather than assuming it remains identical. Configuration reference
The toolbar must exist when Quill initializes. ql-header identifies the header format; its 2 value requests a level-two heading. The empty option removes that format and returns to paragraph text. The label is “Paragraph,” not a literal header level zero.
Distinguish controls from accepted document formats
formats: ['header', 'bold', 'italic'] restricts which formats this editor recognizes. The toolbar offers only level two, but allowing header is not a value-specific rule that rejects every other heading level in imported content. If the product requires exactly one permitted level, define and test that stricter import or document policy separately.
Likewise, leaving a Link button out of a large toolbar does not itself prevent supported links from arriving through another route. The format configuration and the visible controls serve different purposes. The Quill HTML import guide explains how imported content is interpreted through the document model.
Do not use the toolbar's DOM as a document record. The selected option describes the current editing context, while quill.getContents() captures the actual document as Delta data. Heading formatting belongs to a line, and Delta represents line formats on newline characters. Delta format
Scope each toolbar to its own instance
If the page contains both a notice editor and an internal comment editor, provide a different toolbar container for each instance. Reusing #notice-toolbar in a second editor's configuration can attach multiple module listeners to the same controls. Unique container IDs and initialization ownership make the intended relationship clear.
Create each editor once for its mounted surface. Repeated initialization is not a way to refresh a selected toolbar state and can accumulate wrappers or listeners. When using a framework, let the integration own the instance lifecycle and connect its actual current editor to application actions.
A custom operation, such as uploading a photograph, needs a handler and an application workflow beyond formatting. The Quill image-upload guide covers that separate path. Keep ordinary Bold and Heading controls on the module's existing format behavior instead of rebuilding them with page-wide event listeners.
Check a heading, a paragraph, and a selected phrase
Use a disposable notice with the title Recorder return and the sentence Bring the labeled case. Select Heading 2 while the cursor is in the title, then choose Paragraph in the body line. Inspect getSemanticHTML(): the title should be a heading and the body a paragraph.
Select labeled and activate Bold, then inspect quill.getContents() for the bold attribute on that word. Move the cursor between the heading and body and check that the select follows the actual current format. If a control seems ineffective, confirm the selected document, the allowed formats, and which toolbar that instance received before changing CSS.
Read the exported notice once more before saving. Its structure and emphasis should come from the document, so the reader does not need the editing toolbar to understand the return instruction.