ba54279a4fc1d370b702b4765430ecac15cea755322158640c2e04be41256a76721be3d6ba5cd1b0322cf361569319323f1f62b0f26d26530c6e398e912b50 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <h1 align="center">
  2. <a href="https://quilljs.com/" title="Quill">Quill Rich Text Editor</a>
  3. </h1>
  4. <p align="center">
  5. <a href="https://quilljs.com/" title="Quill"><img alt="Quill Logo" src="https://quilljs.com/assets/images/logo.svg" width="180"></a>
  6. </p>
  7. <p align="center">
  8. <a title="Documentation" href="https://quilljs.com/docs/quickstart"><strong>Documentation</strong></a>
  9. &#x2022;
  10. <a title="Development" href="https://github.com/quilljs/quill/blob/main/.github/DEVELOPMENT.md"><strong>Development</strong></a>
  11. &#x2022;
  12. <a title="Contributing" href="https://github.com/quilljs/quill/blob/main/.github/CONTRIBUTING.md"><strong>Contributing</strong></a>
  13. &#x2022;
  14. <a title="Interactive Playground" href="https://quilljs.com/playground/"><strong>Interactive Playground</strong></a>
  15. </p>
  16. <p align="center">
  17. <a href="https://github.com/quilljs/quill/actions" title="Build Status"><img src="https://github.com/quilljs/quill/actions/workflows/main.yml/badge.svg" alt="Build Status"></a>
  18. <a href="https://npmjs.com/package/quill" title="Version"><img src="https://img.shields.io/npm/v/quill.svg" alt="Version"></a>
  19. <a href="https://npmjs.com/package/quill" title="Downloads"><img src="https://img.shields.io/npm/dm/quill.svg" alt="Downloads"></a>
  20. </p>
  21. <hr/>
  22. [Quill](https://quilljs.com/) 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 actively maintained by [Slab](https://slab.com).
  23. To get started, check out [https://quilljs.com/](https://quilljs.com/) for documentation, guides, and live demos!
  24. ## Quickstart
  25. Instantiate a new Quill object with a css selector for the div that should become the editor.
  26. ```html
  27. <!-- Include Quill stylesheet -->
  28. <link
  29. href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
  30. rel="stylesheet"
  31. />
  32. <!-- Create the toolbar container -->
  33. <div id="toolbar">
  34. <button class="ql-bold">Bold</button>
  35. <button class="ql-italic">Italic</button>
  36. </div>
  37. <!-- Create the editor container -->
  38. <div id="editor">
  39. <p>Hello World!</p>
  40. <p>Some initial <strong>bold</strong> text</p>
  41. <p><br /></p>
  42. </div>
  43. <!-- Include the Quill library -->
  44. <script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
  45. <!-- Initialize Quill editor -->
  46. <script>
  47. const quill = new Quill("#editor", {
  48. theme: "snow",
  49. });
  50. </script>
  51. ```
  52. Take a look at the [Quill](https://quilljs.com/) website for more documentation, guides and [live playground](https://quilljs.com/playground/)!
  53. ## Download
  54. ```shell
  55. npm install quill
  56. ```
  57. ### CDN
  58. ```html
  59. <!-- Main Quill library -->
  60. <script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
  61. <!-- Theme included stylesheets -->
  62. <link
  63. href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
  64. rel="stylesheet"
  65. />
  66. <link
  67. href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.bubble.css"
  68. rel="stylesheet"
  69. />
  70. <!-- Core build with no theme, formatting, non-essential modules -->
  71. <link
  72. href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.css"
  73. rel="stylesheet"
  74. />
  75. <script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.js"></script>
  76. ```
  77. ## Community
  78. Get help or stay up to date.
  79. - [Contribute](https://github.com/quilljs/quill/blob/main/.github/CONTRIBUTING.md) on [Issues](https://github.com/quilljs/quill/issues)
  80. - Ask questions on [Discussions](https://github.com/quilljs/quill/discussions)
  81. ## License
  82. BSD 3-clause