configuration.mdx 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. ---
  2. title: Configuration
  3. ---
  4. Quill allows several ways to customize it to suit your needs. This section is dedicated to tweaking existing functionality. See the [Modules](/docs/modules/) section for adding new functionality and the [Themes](/docs/themes/) section for styling.
  5. ### Container
  6. Quill requires a container where the editor will be appended. You can pass in either a CSS selector or a DOM object.
  7. ```javascript
  8. const editor = new Quill('#editor'); // First matching element will be used
  9. ```
  10. ```javascript
  11. const container = document.getElementById('editor');
  12. const editor = new Quill(container);
  13. ```
  14. ### Options
  15. To configure Quill, pass in an options object:
  16. ```javascript
  17. const options = {
  18. debug: 'info',
  19. modules: {
  20. toolbar: '#toolbar'
  21. },
  22. placeholder: 'Compose an epic...',
  23. readOnly: true,
  24. theme: 'snow'
  25. };
  26. const editor = new Quill('#editor', options);
  27. ```
  28. The following keys are recognized:
  29. #### bounds
  30. Default: `document.body`
  31. DOM Element or a CSS selector for a DOM Element, within which the editor's ui elements (i.e. tooltips, etc.) should be confined. Currently, it only considers left and right boundaries.
  32. #### debug
  33. Default: `warn`
  34. Shortcut for [debug](/docs/api/#debug). Note `debug` is a static method and will affect other instances of Quill editors on the page. Only warning and error messages are enabled by default.
  35. #### formats
  36. Default: All formats
  37. Whitelist of formats to allow in the editor. See [Formats](/docs/formats/) for a complete list.
  38. #### modules
  39. Collection of modules to include and respective options. See [Modules](/docs/modules/) for more information.
  40. #### placeholder
  41. Default: None
  42. Placeholder text to show when editor is empty.
  43. #### readOnly
  44. Default: `false`
  45. Whether to instantiate the editor to read-only mode.
  46. #### theme
  47. Name of theme to use. The builtin options are "bubble" or "snow". An invalid or falsy value will load a default minimal theme. Note the theme's specific stylesheet still needs to be included manually. See [Themes](/docs/themes/) for more information.