registries.mdx 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. ---
  2. title: Registries
  3. ---
  4. Registries allow multiple editors with different formats to coexist on the same page.
  5. If you register a format with `Quill.register()`, the format will be registered to a global registry,
  6. which will be used by all Quill instances.
  7. However, in some cases, you might want to have multiple registries, so that different Quill instances
  8. can have different formats. For example, you might want to have a Quill instance that only supports
  9. bold and italic, and another Quill instance that supports bold, italic, and underline.
  10. ## Usage
  11. To create a Quill with a custom registry, you can pass in a registry object to the Quill constructor:
  12. ```js
  13. const registry = new Parchment.Registry();
  14. // Register the formats that you need for the editor with `registry.register()`.
  15. // We will cover this in more detail in the next section.
  16. const quill = new Quill('#editor', {
  17. registry,
  18. // ...other options
  19. })
  20. ```
  21. ## Register Formats
  22. A custom registry doesn't come with any formats by default. You should register the formats that you need with `registry.register()`.
  23. There are some essential formats that you will need to register in order to have a functional editor:
  24. <Sandpack
  25. defaultShowPreview
  26. files={{
  27. 'index.html': `
  28. <!-- Include stylesheet -->
  29. <link href="{{site.cdn}}/quill.snow.css" rel="stylesheet" />
  30. <div id="editor">
  31. </div>
  32. <!-- Include the Quill library -->
  33. <script src="{{site.cdn}}/quill.js"></script>
  34. <script src="/index.js"></script>`,
  35. "/index.js": `
  36. const Parchment = Quill.import('parchment');
  37. // Essential formats
  38. const Block = Quill.import('blots/block');
  39. const Break = Quill.import('blots/break');
  40. const Container = Quill.import('blots/container');
  41. const Cursor = Quill.import('blots/cursor');
  42. const Inline = Quill.import('blots/inline');
  43. const Scroll = Quill.import('blots/scroll');
  44. const Text= Quill.import('blots/text');
  45. const registry = new Parchment.Registry();
  46. registry.register(
  47. Scroll,
  48. Block,
  49. Break,
  50. Container,
  51. Cursor,
  52. Inline,
  53. Text,
  54. );
  55. const quill = new Quill('#editor', {
  56. registry,
  57. theme: 'snow'
  58. });
  59. `}}
  60. />
  61. <Hint>
  62. You may have noticed that the format buttons on the toolbar above doesn't work.
  63. This is because we haven't registered any of the corresponding formats yet.
  64. The toolbar module doesn't detect whether a format is available or not, so it will always show the buttons.
  65. Follow [this guide](/docs/modules/toolbar) to learn more about how to customize the toolbar.
  66. </Hint>