Wiki source code of Integrate Blocknote Headless in a Vue template
Last modified by Manuel Leduc on 2026/02/05 17:22
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | Here we are importing the [[CBlockNoteView>>doc:documentation.xs.dev.front-end.editor.blocknote.headless-reference.WebHome||anchor="HCBlockNoteView"]] component from {{code}}@xwiki/platform-blocknote-headless{{/code}} and using it inside our own. | ||
| 2 | |||
| 3 | This will render a complete BlockNote editor, along with the customizations that are proper to Cristal (handling of internal links, custom blocks, etc.). | ||
| 4 | |||
| 5 | Many properties are available to customize the editor further, adding realtime capabilities or being notified when the editor's content changes. | ||
| 6 | |||
| 7 | {{code}} | ||
| 8 | <script setup lang="ts"> | ||
| 9 | import { collaborationManagerProviderName } from "@xwiki/cristal-collaboration-api"; | ||
| 10 | import { | ||
| 11 | BlocknoteEditor as CBlockNoteView, | ||
| 12 | DEFAULT_MACROS, | ||
| 13 | } from "@xwiki/cristal-editors-blocknote-headless"; | ||
| 14 | import type { | ||
| 15 | CollaborationInitializer, | ||
| 16 | CollaborationManagerProvider, | ||
| 17 | User, | ||
| 18 | } from "@xwiki/cristal-collaboration-api"; | ||
| 19 | import { createMacro } from "../../../blocknote-react/dist"; | ||
| 20 | |||
| 21 | const collaborationManager = container | ||
| 22 | .get<CollaborationManagerProvider>(collaborationManagerProviderName) | ||
| 23 | .get(); | ||
| 24 | |||
| 25 | const collaborationProvider = await collaborationManager.get(); | ||
| 26 | </script> | ||
| 27 | |||
| 28 | <template> | ||
| 29 | <CBlockNoteView | ||
| 30 | :editor-props="{ | ||
| 31 | lang: 'en', | ||
| 32 | // Optional | ||
| 33 | blockNoteOptions: { | ||
| 34 | // ... | ||
| 35 | }, | ||
| 36 | // Optional | ||
| 37 | onChange(editor) { | ||
| 38 | // Get the entire document from the editor | ||
| 39 | console.log(editor.document); | ||
| 40 | }, | ||
| 41 | // Optional | ||
| 42 | theme: 'dark', | ||
| 43 | }" | ||
| 44 | :container="container" | ||
| 45 | :collaboration-provider="collaborationProvider /* Optional */" | ||
| 46 | :macros="[]" | ||
| 47 | :editor-content="{ | ||
| 48 | blocks: [ | ||
| 49 | { | ||
| 50 | type: 'paragraph', | ||
| 51 | content: [ | ||
| 52 | { | ||
| 53 | type: 'text', | ||
| 54 | content: 'Hello world!', | ||
| 55 | styles: { bold: true }, | ||
| 56 | }, | ||
| 57 | ], | ||
| 58 | styles: { | ||
| 59 | textColor: '#123456', | ||
| 60 | }, | ||
| 61 | }, | ||
| 62 | ], | ||
| 63 | }" | ||
| 64 | @instant-change="console.log('Something changed inside the editor!')" | ||
| 65 | @debounced-change=" | ||
| 66 | console.log( | ||
| 67 | 'Something changed inside the editor (only triggered once a few delay passed after the user stopped typing)', | ||
| 68 | ) | ||
| 69 | " | ||
| 70 | /> | ||
| 71 | </template> | ||
| 72 | {{/code}} |
