mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-15 02:59:01 +08:00
add drag handle example
This commit is contained in:
parent
483fe11434
commit
2d1778b32f
32
examples/Components/Routes/DragHandle/DragItem.js
Normal file
32
examples/Components/Routes/DragHandle/DragItem.js
Normal file
@ -0,0 +1,32 @@
|
||||
import { Node } from 'tiptap'
|
||||
|
||||
export default class DragItem extends Node {
|
||||
|
||||
get name() {
|
||||
return 'drag_item'
|
||||
}
|
||||
|
||||
get schema() {
|
||||
return {
|
||||
group: 'block',
|
||||
draggable: true,
|
||||
content: 'paragraph+',
|
||||
toDOM: () => ['div', { 'data-type': this.name }, 0],
|
||||
parseDOM: [{
|
||||
tag: `[data-type="${this.name}"]`,
|
||||
}],
|
||||
}
|
||||
}
|
||||
|
||||
get view() {
|
||||
return {
|
||||
template: `
|
||||
<div data-type="drag_item">
|
||||
<div ref="content" contenteditable="true"></div>
|
||||
<div data-drag-handle contenteditable="false"></div>
|
||||
</div>
|
||||
`,
|
||||
}
|
||||
}
|
||||
|
||||
}
|
70
examples/Components/Routes/DragHandle/index.vue
Normal file
70
examples/Components/Routes/DragHandle/index.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="editor">
|
||||
<editor-content class="editor__content" :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from 'Components/Icon'
|
||||
import { Editor, EditorContent } from 'tiptap'
|
||||
import { Heading, Code } from 'tiptap-extensions'
|
||||
import DragItem from './DragItem'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new Heading(),
|
||||
new Code(),
|
||||
new DragItem(),
|
||||
],
|
||||
content: `
|
||||
<h2>
|
||||
Drag Handle
|
||||
</h2>
|
||||
<p>
|
||||
Add <code>data-drag-handle</code> to a DOM element within your node view to define your custom drag handle.
|
||||
</p>
|
||||
<div data-type="drag_item">
|
||||
Drag me!
|
||||
</div>
|
||||
<div data-type="drag_item">
|
||||
Try it!
|
||||
</div>
|
||||
<div data-type="drag_item">
|
||||
It works!
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
[data-type="drag_item"] {
|
||||
display: flex;
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(black, 0.05);
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 6px;
|
||||
|
||||
> :first-child {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -60,6 +60,9 @@
|
||||
<router-link class="subnavigation__link" to="/trailing-paragraph">
|
||||
Trailing Paragraph
|
||||
</router-link>
|
||||
<router-link class="subnavigation__link" to="/drag-handle">
|
||||
Drag Handle
|
||||
</router-link>
|
||||
<router-link class="subnavigation__link" to="/export">
|
||||
Export HTML or JSON
|
||||
</router-link>
|
||||
|
@ -151,6 +151,13 @@ const routes = [
|
||||
githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/TrailingParagraph',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/drag-handle',
|
||||
component: () => import('Components/Routes/DragHandle'),
|
||||
meta: {
|
||||
githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/DragHandle',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/export',
|
||||
component: () => import('Components/Routes/Export'),
|
||||
|
Loading…
Reference in New Issue
Block a user