<smart-quill>

SmartQuill

A validated rich text editor built on top of Quill.js. Integrates with HTML forms via a hidden input, supports required validation with shake animation, and exposes a clean JS API.

Quill.js Form Ready Validation Full Toolbar

<script src="rich_text_input.js"></script>

Basic Usage


<smart-quill
  name="description"
  label="Description"
  placeholder="Write a detailed description..."
  required
></smart-quill>

<!-- With initial content -->
<smart-quill
  name="body"
  label="Article Body"
  value="<p>Existing content</p>"
></smart-quill>

Validation

When required is set, the editor validates that meaningful content exists (not just empty paragraphs). On failure, a red border appears with a shake animation.

Content *

B I

Enter some content...

Content is required


// Validate in form submit
const quill = document.querySelector('smart-quill');

// Returns boolean, shows error UI
const isValid = quill.validate();

// Or use checkValidity()
const ok = quill.checkValidity();

Attributes

Attribute	Type	Description	Default
name	string	Hidden input name for form submission	richtext
label	string	Display label above editor	Description
placeholder	string	Placeholder text when empty	—
value	string	Initial HTML content	—
required	boolean	Makes editor required for form submission	false
required-message	string	Custom error message text	{label} is required

JavaScript API


const editor = document.querySelector('smart-quill');

// Get/set HTML content
console.log(editor.value);           // → "<p>Hello</p>"
editor.value = "<p>New content</p>";

// Get plain text
editor.getText();         // → "Hello world"

// Get raw HTML
editor.getHTML();         // → "<p>Hello <strong>world</strong></p>"

// Get character count
editor.getLength();      // → 11

// Control focus
editor.focus();
editor.blur();

// Clear content
editor.clear();

// Validate
editor.validate();       // → boolean
editor.checkValidity(); // → boolean