mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-06-07 17:43:49 +08:00
add vue router
This commit is contained in:
Philipp Kühn
parent
ae1eafed09
commit
3025642dfb
266
examples/App.vue
266
examples/App.vue
@ -1,277 +1,13 @@
|
||||
<template>
|
||||
<div id="app" spellcheck="false">
|
||||
|
||||
<editor :editable="true" class="editor" :doc="data" :extensions="plugins" @update="onUpdate">
|
||||
|
||||
<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
|
||||
<template v-if="marks">
|
||||
<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(linkUrl, marks.link, focus)">
|
||||
<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/>
|
||||
<button class="menububble__button" @click="setLinkUrl(null, marks.link, focus)" type="button">
|
||||
<icon name="remove" />
|
||||
</button>
|
||||
</form>
|
||||
<template v-else>
|
||||
<button class="menububble__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }">
|
||||
<icon name="bold" />
|
||||
</button>
|
||||
<button class="menububble__button" @click="marks.italic.command" :class="{ 'is-active': marks.italic.active() }">
|
||||
<icon name="italic" />
|
||||
</button>
|
||||
<button class="menububble__button" @click="marks.code.command" :class="{ 'is-active': marks.code.active() }">
|
||||
<icon name="code" />
|
||||
</button>
|
||||
<button class="menububble__button" @click="showLinkMenu(marks.link)" :class="{ 'is-active': marks.link.active() }">
|
||||
<icon name="link" />
|
||||
</button>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div class="menubar" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, focused }">
|
||||
<div v-if="nodes">
|
||||
<button class="menubar__button" @click="nodes.paragraph.command" :class="{ 'is-active': nodes.paragraph.active() }">
|
||||
<icon name="paragraph" />
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.heading.command({ level: 1 })" :class="{ 'is-active': nodes.heading.active({ level: 1 }) }">
|
||||
H1
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.heading.command({ level: 2 })" :class="{ 'is-active': nodes.heading.active({ level: 2 }) }">
|
||||
H2
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.heading.command({ level: 3 })" :class="{ 'is-active': nodes.heading.active({ level: 3 }) }">
|
||||
H3
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.bullet_list.command" :class="{ 'is-active': nodes.bullet_list.active() }">
|
||||
<icon name="ul" />
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.ordered_list.command" :class="{ 'is-active': nodes.ordered_list.active() }">
|
||||
<icon name="ol" />
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.code_block.command" :class="{ 'is-active': nodes.code_block.active() }">
|
||||
<icon name="code" />
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.todo_list.command" :class="{ 'is-active': nodes.todo_list.active() }">
|
||||
<icon name="checklist" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor__content" slot="content" slot-scope="props"></div>
|
||||
</editor>
|
||||
|
||||
<!-- <pre>{{ data }}</pre> -->
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from 'Components/Icon'
|
||||
import { Editor } from 'tiptap'
|
||||
import MentionPlugin from './plugins/Mention.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Editor,
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
linkUrl: null,
|
||||
linkMenuIsActive: false,
|
||||
plugins: [
|
||||
new MentionPlugin(),
|
||||
],
|
||||
data: {
|
||||
"type": "doc",
|
||||
"content": [
|
||||
{
|
||||
"type": "heading",
|
||||
"attrs": {
|
||||
"level": 1,
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "A renderless rich-text editor for Vue.js "
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "This editor is based on "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"marks": [
|
||||
{
|
||||
"type": "link",
|
||||
"attrs": {
|
||||
"href": "https://prosemirror.net"
|
||||
}
|
||||
}
|
||||
],
|
||||
"text": "Prosemirror"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": ", "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"marks": [
|
||||
{
|
||||
"type": "italic"
|
||||
}
|
||||
],
|
||||
"text": "fully extendable "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": "and renderless. There is a plugin system that lets you render each node as "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"marks": [
|
||||
{
|
||||
"type": "bold"
|
||||
}
|
||||
],
|
||||
"text": "a vue component. "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Things like mentions "
|
||||
},
|
||||
{
|
||||
"type": "mention",
|
||||
"attrs": {
|
||||
"id": "Philipp"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": " are also supported."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "code_block",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "body {\n display: none;\n}"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "todo_list",
|
||||
"content": [
|
||||
{
|
||||
"type": "todo_item",
|
||||
"attrs": {
|
||||
"done": true
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "There is always something to do"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "todo_item",
|
||||
"attrs": {
|
||||
"done": false
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "This list will never end"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "bullet_list",
|
||||
"content": [
|
||||
{
|
||||
"type": "list_item",
|
||||
"content": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "A regular list"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "list_item",
|
||||
"content": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "With regular items"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "It's amazing 👏"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showLinkMenu(type) {
|
||||
this.linkUrl = type.attrs.href
|
||||
this.linkMenuIsActive = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.linkInput.focus()
|
||||
})
|
||||
},
|
||||
hideLinkMenu() {
|
||||
this.linkUrl = null
|
||||
this.linkMenuIsActive = false
|
||||
},
|
||||
setLinkUrl(url, type, focus) {
|
||||
type.command({ href: url })
|
||||
this.hideLinkMenu()
|
||||
focus()
|
||||
},
|
||||
onUpdate(state) {
|
||||
this.data = state.doc.toJSON()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
273
examples/Components/Routes/Default/index.vue
Normal file
273
examples/Components/Routes/Default/index.vue
Normal file
@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div>
|
||||
<editor :editable="true" class="editor" :doc="data" :extensions="plugins" @update="onUpdate">
|
||||
<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
|
||||
<template v-if="marks">
|
||||
<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(linkUrl, marks.link, focus)">
|
||||
<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/>
|
||||
<button class="menububble__button" @click="setLinkUrl(null, marks.link, focus)" type="button">
|
||||
<icon name="remove" />
|
||||
</button>
|
||||
</form>
|
||||
<template v-else>
|
||||
<button class="menububble__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }">
|
||||
<icon name="bold" />
|
||||
</button>
|
||||
<button class="menububble__button" @click="marks.italic.command" :class="{ 'is-active': marks.italic.active() }">
|
||||
<icon name="italic" />
|
||||
</button>
|
||||
<button class="menububble__button" @click="marks.code.command" :class="{ 'is-active': marks.code.active() }">
|
||||
<icon name="code" />
|
||||
</button>
|
||||
<button class="menububble__button" @click="showLinkMenu(marks.link)" :class="{ 'is-active': marks.link.active() }">
|
||||
<icon name="link" />
|
||||
</button>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div class="menubar" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, focused }">
|
||||
<div v-if="nodes">
|
||||
<button class="menubar__button" @click="nodes.paragraph.command" :class="{ 'is-active': nodes.paragraph.active() }">
|
||||
<icon name="paragraph" />
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.heading.command({ level: 1 })" :class="{ 'is-active': nodes.heading.active({ level: 1 }) }">
|
||||
H1
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.heading.command({ level: 2 })" :class="{ 'is-active': nodes.heading.active({ level: 2 }) }">
|
||||
H2
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.heading.command({ level: 3 })" :class="{ 'is-active': nodes.heading.active({ level: 3 }) }">
|
||||
H3
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.bullet_list.command" :class="{ 'is-active': nodes.bullet_list.active() }">
|
||||
<icon name="ul" />
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.ordered_list.command" :class="{ 'is-active': nodes.ordered_list.active() }">
|
||||
<icon name="ol" />
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.code_block.command" :class="{ 'is-active': nodes.code_block.active() }">
|
||||
<icon name="code" />
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.todo_list.command" :class="{ 'is-active': nodes.todo_list.active() }">
|
||||
<icon name="checklist" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor__content" slot="content" slot-scope="props"></div>
|
||||
</editor>
|
||||
|
||||
<!-- <pre>{{ data }}</pre> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from 'Components/Icon'
|
||||
import { Editor } from 'tiptap'
|
||||
import MentionPlugin from './Mention.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Editor,
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
linkUrl: null,
|
||||
linkMenuIsActive: false,
|
||||
plugins: [
|
||||
new MentionPlugin(),
|
||||
],
|
||||
data: {
|
||||
"type": "doc",
|
||||
"content": [
|
||||
{
|
||||
"type": "heading",
|
||||
"attrs": {
|
||||
"level": 1,
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "A renderless rich-text editor for Vue.js "
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "This editor is based on "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"marks": [
|
||||
{
|
||||
"type": "link",
|
||||
"attrs": {
|
||||
"href": "https://prosemirror.net"
|
||||
}
|
||||
}
|
||||
],
|
||||
"text": "Prosemirror"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": ", "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"marks": [
|
||||
{
|
||||
"type": "italic"
|
||||
}
|
||||
],
|
||||
"text": "fully extendable "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": "and renderless. There is a plugin system that lets you render each node as "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"marks": [
|
||||
{
|
||||
"type": "bold"
|
||||
}
|
||||
],
|
||||
"text": "a vue component. "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Things like mentions "
|
||||
},
|
||||
{
|
||||
"type": "mention",
|
||||
"attrs": {
|
||||
"id": "Philipp"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": " are also supported."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "code_block",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "body {\n display: none;\n}"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "todo_list",
|
||||
"content": [
|
||||
{
|
||||
"type": "todo_item",
|
||||
"attrs": {
|
||||
"done": true
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "There is always something to do"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "todo_item",
|
||||
"attrs": {
|
||||
"done": false
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "This list will never end"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "bullet_list",
|
||||
"content": [
|
||||
{
|
||||
"type": "list_item",
|
||||
"content": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "A regular list"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "list_item",
|
||||
"content": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "With regular items"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "It's amazing 👏"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showLinkMenu(type) {
|
||||
this.linkUrl = type.attrs.href
|
||||
this.linkMenuIsActive = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.linkInput.focus()
|
||||
})
|
||||
},
|
||||
hideLinkMenu() {
|
||||
this.linkUrl = null
|
||||
this.linkMenuIsActive = false
|
||||
},
|
||||
setLinkUrl(url, type, focus) {
|
||||
type.command({ href: url })
|
||||
this.hideLinkMenu()
|
||||
focus()
|
||||
},
|
||||
onUpdate(state) {
|
||||
this.data = state.doc.toJSON()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,6 @@
|
||||
import '@babel/polyfill'
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import svgSpriteLoader from 'helpers/svg-sprite-loader'
|
||||
import App from './App.vue'
|
||||
|
||||
@ -8,6 +9,20 @@ svgSpriteLoader(__svg__.filename)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('Components/Routes/Default'),
|
||||
},
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
routes,
|
||||
})
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
|
||||
@ -34,9 +34,10 @@
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
[
|
||||
"@babel/preset-env"
|
||||
]
|
||||
],
|
||||
"plugins": [
|
||||
"@babel/plugin-syntax-dynamic-import"
|
||||
]
|
||||
},
|
||||
"postcss": {
|
||||
@ -52,6 +53,7 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.0.0-rc.2",
|
||||
"@babel/node": "^7.0.0-rc.2",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.0.0-rc.2",
|
||||
"@babel/plugin-transform-runtime": "^7.0.0-rc.2",
|
||||
"@babel/polyfill": "^7.0.0-rc.2",
|
||||
"@babel/preset-env": "^7.0.0-rc.2",
|
||||
@ -94,6 +96,7 @@
|
||||
"uglify-js": "^3.4.7",
|
||||
"vue": "^2.5.17",
|
||||
"vue-loader": "^15.2.4",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-style-loader": "^4.1.0",
|
||||
"vue-template-compiler": "^2.5.17",
|
||||
"webpack": "^4.15.1",
|
||||
|
||||
10
yarn.lock
10
yarn.lock
@ -292,6 +292,12 @@
|
||||
dependencies:
|
||||
"@babel/helper-plugin-utils" "7.0.0-rc.2"
|
||||
|
||||
"@babel/plugin-syntax-dynamic-import@^7.0.0-rc.2":
|
||||
version "7.0.0-rc.2"
|
||||
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.0.0-rc.2.tgz#a21957616ee59691d57de45d18e8e40b8855fa7e"
|
||||
dependencies:
|
||||
"@babel/helper-plugin-utils" "7.0.0-rc.2"
|
||||
|
||||
"@babel/plugin-syntax-json-strings@7.0.0-rc.2":
|
||||
version "7.0.0-rc.2"
|
||||
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.0.0-rc.2.tgz#6c16304a379620034190c06b50da3812351967f2"
|
||||
@ -8695,6 +8701,10 @@ vue-loader@^15.2.4:
|
||||
vue-hot-reload-api "^2.3.0"
|
||||
vue-style-loader "^4.1.0"
|
||||
|
||||
vue-router@^3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"
|
||||
|
||||
vue-style-loader@^4.1.0:
|
||||
version "4.1.2"
|
||||
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user