quill README

The project's README from github.com/slab/quill. As one markdown file: README.md.

Quill Rich Text Editor

Quill Logo

Documentation • Development • Contributing • Interactive Playground

Build Status Version Downloads

Quill is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and actively maintained by Slab.

To get started, check out https://quilljs.com/ for documentation, guides, and live demos!

Quickstart

Instantiate a new Quill object with a css selector for the div that should become the editor.

<!-- Include Quill stylesheet -->
<link
  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
  rel="stylesheet"
/>

<!-- Create the toolbar container -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br /></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  const quill = new Quill("#editor", {
    theme: "snow",
  });
</script>

Take a look at the Quill website for more documentation, guides and live playground!

Download

npm install quill

CDN

<!-- Main Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>

<!-- Theme included stylesheets -->
<link
  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.bubble.css"
  rel="stylesheet"
/>

<!-- Core build with no theme, formatting, non-essential modules -->
<link
  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.js"></script>

Community

Get help or stay up to date.

License

BSD 3-clause

quill (slab/quill)

text-editor
Searching Database…

47.4K ·GitHub
Quill
What is this?Quill is a modern WYSIWYG (what-you-see-is-what-you-get) rich text editor for the web, built for compatibility and extensibility.
Is it a standalone app or a library I embed?It's a JavaScript/TypeScript library you embed in a webpage: you instantiate a Quill object on a div to turn it into a rich text editor.
How do I add it to my project?Install it as an npm package or pull it in via CDN, then create a target div and instantiate `new Quill(selector, options)`.
Do I need a build tool or framework to use it?No specific framework is required; it works with a plain CSS selector pointing at a div, and the repo itself is an npm-managed monorepo (npm >=8.2.3).
Where do I find full docs and a live playground?The Quill website hosts documentation, guides, and a live demo/playground for trying out the editor before integrating it.
What makes Quill different from other rich text editors?It's specifically built with compatibility and extensibility as core goals, letting it be customized and extended rather than being a fixed, closed editor.
What are similar projects?ckeditor5, pell, tinymce, medium-editor, milkdown, simplemde-markdown-editor, tiptap, trix
Which topics is it in?contenteditable, wysiwyg-editor, component, cdn, rich-text-editor, markdown-editor, wysiwyg, text-editor, npm-package, editor, bsd, web-development
Creator
slab
Size
18 MB
Stars
47.4K
Updated
CommitJul 25Releasev2.0.3Nov 30
Age
14y
Commits · 90 Days