Basic
[
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "I'm running Tiptap with use-bootstrap. 🎉"
}
]
},
{
"type": "paragraph"
}
]
vue
<template>
<button
@click="toggleBold"
>
Bold
</button>
<TiptapEditor
v-model="content"
:command="command"
/>
<JsonView :data="content" />
</template>
<script setup lang="ts">
const content = ref([
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'I\'m running Tiptap with use-bootstrap. 🎉',
},
],
},
{
type: 'paragraph',
},
],
);
const command = ref();
const toggleBold = () => {
command.value = { name: 'toggleBold' };
};
</script>
Integration
[
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "I'm running Tiptap with use-bootstrap. 🎉"
}
]
},
{
"type": "paragraph"
}
]
vue
<template>
<ViewState
v-slot="example"
src="state://editor"
:data="[
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'I\'m running Tiptap with use-bootstrap. 🎉',
},
],
},
{
type: 'paragraph',
},
]"
>
<TiptapEditor
:state-src="example"
/>
<JsonView :data="example.data" />
</ViewState>
</template>