https://github.com/damengshu/blocknote-vue
BlockNote use veaury to provide Vue.js components for BlockNote editor.
https://github.com/damengshu/blocknote-vue
blocknote editor notion-editor tiptap veaury vue
Last synced: 6 days ago
JSON representation
BlockNote use veaury to provide Vue.js components for BlockNote editor.
- Host: GitHub
- URL: https://github.com/damengshu/blocknote-vue
- Owner: damengshu
- License: mit
- Created: 2025-11-08T01:50:50.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2025-11-08T03:58:50.000Z (6 months ago)
- Last Synced: 2025-11-08T04:06:54.255Z (6 months ago)
- Topics: blocknote, editor, notion-editor, tiptap, veaury, vue
- Language: TypeScript
- Homepage:
- Size: 151 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue3 中使用 **[BlockNote](https://www.blocknotejs.org/docs#introduction-to-blocknote)**
#### use [veaury](https://github.com/gloriasoft/veaury/) support react component in vue3
## 安装
```bash
npm install blocknote-vue
```
## 快速开始
```vue
update
import { BlockNoteView } from 'blocknote-vue'
import { Exposed } from 'blocknote-vue/es/BlockNoteView.vue'
const blockNoteViewRef = ref<Exposed | null>(null)
const editorProps: any = ref({
initialContent: [
{
id: '685bd685-4e26-4c77-a97a-16fc6db68dde',
type: 'paragraph',
props: {
backgroundColor: 'default',
textColor: 'default',
textAlignment: 'left'
},
content: [
{
type: 'text',
text: 'Welcome to this demo!',
styles: {}
}
],
children: []
},
{
id: '0a3bb640-f66c-4c58-9466-f19de032b841',
type: 'heading',
props: {
backgroundColor: 'default',
textColor: 'default',
textAlignment: 'left',
level: 1,
isToggleable: false
},
content: [
{
type: 'text',
text: 'This is a heading block',
styles: {}
}
],
children: []
},
{
id: '07bc4a38-fe90-4538-8b3a-af11412e7988',
type: 'paragraph',
props: {
backgroundColor: 'default',
textColor: 'default',
textAlignment: 'left'
},
content: [
{
type: 'text',
text: 'This is a paragraph block',
styles: {}
}
],
children: []
},
{
id: '7bab9d7d-b63b-4aad-acfc-3c68bdbbe332',
type: 'paragraph',
props: {
backgroundColor: 'default',
textColor: 'default',
textAlignment: 'left'
},
content: [],
children: []
}
]
})
const handleChange = (document: any, changes: any, markdown: string) => {
console.log('Markdown content:', markdown)
console.log('Document content:', document)
console.log('Changes:', changes)
}
const handleUpdate = () => {
const editor = blockNoteViewRef.value?.editor
if (!editor) {
console.warn('Editor 未初始化')
return
}
const newBlocks = [
{
id: 'new-block-1',
type: 'paragraph',
props: {
backgroundColor: 'default',
textColor: 'default',
textAlignment: 'left'
},
content: [
{
type: 'text',
text: 'This is a new paragraph block added programmatically.',
styles: {}
}
],
children: []
}
]
editor.replaceBlocks(editor.document, newBlocks)
}
@import 'blocknote-vue/es/blocknote-vue.css';
```