| 1 | # [Quill Rich Text Editor](http://quilljs.com/) [](http://travis-ci.org/quilljs/quill)
|
| 2 |
|
| 3 | [](https://saucelabs.com/u/quill)
|
| 4 |
|
| 5 | Quill is a modern rich text editor built for compatibility and extensibility. It was created by [Jason Chen](https://twitter.com/jhchen) and [Byron Milligan](https://twitter.com/byronmilligan) and open sourced by [Salesforce.com](http://www.salesforce.com).
|
| 6 |
|
| 7 | To get started, check out the [Quill website](http://quilljs.com/) for documentation, guides, and live demos!
|
| 8 |
|
| 9 |
|
| 10 | ## Useful Links
|
| 11 |
|
| 12 | - [Demo](https://quilljs.com/)
|
| 13 | - [Documentation](https://quilljs.com/docs/)
|
| 14 | - [How-to Guides](https://quilljs.com/guides/)
|
| 15 | - [Interactive Playground](https://quilljs.com/playground/)
|
| 16 | - [Contributing](https://github.com/quilljs/quill/blob/master/.github/CONTRIBUTING.md)
|
| 17 | - [Local Development](https://github.com/quilljs/quill/blob/master/.github/DEVELOPMENT.md)
|
| 18 |
|
| 19 |
|
| 20 | ## Quickstart
|
| 21 |
|
| 22 | Instantiate a new Quill object with a css selector for the div that should become the editor.
|
| 23 |
|
| 24 | ```html
|
| 25 | <!-- Include Quill stylesheet -->
|
| 26 | <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
|
| 27 |
|
| 28 | <!-- Create the toolbar container -->
|
| 29 | <div id="toolbar">
|
| 30 | <button class="ql-bold">Bold</button>
|
| 31 | <button class="ql-italic">Italic</button>
|
| 32 | </div>
|
| 33 |
|
| 34 | <!-- Create the editor container -->
|
| 35 | <div id="editor">
|
| 36 | <p>Hello World!</p>
|
| 37 | </div>
|
| 38 |
|
| 39 | <!-- Include the Quill library -->
|
| 40 | <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
|
| 41 |
|
| 42 | <!-- Initialize Quill editor -->
|
| 43 | <script>
|
| 44 | var editor = new Quill('#editor', {
|
| 45 | modules: { toolbar: '#toolbar' },
|
| 46 | theme: 'snow'
|
| 47 | });
|
| 48 | </script>
|
| 49 | ```
|
| 50 |
|
| 51 | Take a look at the [Quill website](https://quilljs.com/) for more documentation, guides and [live playground](https://quilljs.com/playground/)!
|
| 52 |
|
| 53 |
|
| 54 | ## Download
|
| 55 |
|
| 56 | - [npm](https://www.npmjs.com/package/quill) - `npm install quill`
|
| 57 | - tar - https://github.com/quilljs/quill/releases
|
| 58 |
|
| 59 |
|
| 60 | ### CDN
|
| 61 |
|
| 62 | ```html
|
| 63 | <!-- Main Quill library -->
|
| 64 | <script src="//cdn.quilljs.com/1.0.0/quill.js" type="text/javascript"></script>
|
| 65 | <script src="//cdn.quilljs.com/1.0.0/quill.min.js" type="text/javascript"></script>
|
| 66 |
|
| 67 | <!-- Theme included stylesheets -->
|
| 68 | <link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
|
| 69 | <link href="//cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet">
|
| 70 |
|
| 71 | <!-- Core build with no theme, formatting, non-essential modules -->
|
| 72 | <link href="//cdn.quilljs.com/1.0.0/quill.core.css" rel="stylesheet">
|
| 73 | <script src="//cdn.quilljs.com/1.0.0/quill.core.js" type="text/javascript"></script>
|
| 74 | ```
|
| 75 |
|
| 76 |
|
| 77 | ## Community
|
| 78 |
|
| 79 | Get help or stay up to date.
|
| 80 |
|
| 81 | - [Contribute](https://github.com/quilljs/quill/blob/develop/.github/CONTRIBUTING.md) on [Issues](https://github.com/quilljs/quill/issues)
|
| 82 | - Follow [@jhchen](https://twitter.com/jhchen) and [@quilljs](https://twitter.com/quilljs) on Twitter
|
| 83 | - Ask questions on [Stack Overflow](http://stackoverflow.com/questions/tagged/quill)
|
| 84 | - If privacy is required, email support@quilljs.com
|
| 85 |
|
| 86 |
|
| 87 | ## License
|
| 88 |
|
| 89 | BSD 3-clause
|
| 90 | |
| \ | No newline at end of file |