ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: add buttons for adding and removing generic figures

Browse Source
This commit is contained in:
Philipp Kühn
2021-07-28 11:22:57 +02:00
parent 73f1c50bca
commit a1f1125c1a
1 changed files with 119 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
docs/src/demos/Experiments/GenericFigure/index.vue
View File

@@ -1,5 +1,19 @@
<template>
<editor-content :editor="editor" />
<div v-if="editor">
<button @click="addCapturedTable">
add table
</button>
<button @click="addCapturedImage">
add image
</button>
<button @click="removeCapturedTable">
remove table
</button>
<button @click="removeCapturedImage">
remove image
</button>
<editor-content :editor="editor" />
</div>
</template>
<script>
@@ -34,6 +48,110 @@ export default {
}
},
methods: {
addCapturedImage() {
this.editor
.chain()
.focus()
.insertContent({
type: 'capturedImage',
content: [
{
type: 'image',
attrs: {
src: 'https://source.unsplash.com/K9QHL52rE2k/800x400',
},
},
{
type: 'figcaption',
content: [
{
type: 'text',
text: 'image caption',
},
],
},
],
})
.run()
},
addCapturedTable() {
this.editor
.chain()
.focus()
.insertContent({
type: 'capturedTable',
content: [
{
type: 'table',
content: [
{
type: 'tableRow',
content: [
{
type: 'tableCell',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'cell 1',
},
],
},
],
},
{
type: 'tableCell',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'cell 2',
},
],
},
],
},
],
},
],
},
{
type: 'figcaption',
content: [
{
type: 'text',
text: 'table caption',
},
],
},
],
})
.run()
},
removeCapturedTable() {
this.editor
.chain()
.focus()
.deleteNode('capturedTable')
.run()
},
removeCapturedImage() {
this.editor
.chain()
.focus()
.deleteNode('capturedImage')
.run()
},
},
mounted() {
this.editor = new Editor({
extensions: [