mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-10 19:23:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add vue router

Browse Source
This commit is contained in:
Philipp Kühn 2018-08-22 13:30:53 +02:00
parent ae1eafed09
commit 3025642dfb
6 changed files with 305 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

266
examples/App.vue
View File

@ -1,276 +1,12 @@
<template> <template>
<div id="app" spellcheck="false"> <div id="app" spellcheck="false">
<router-view></router-view>
<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> </div>
</template> </template>
<script> <script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
import MentionPlugin from './plugins/Mention.js'
export default { 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> </script>

0
examples/plugins/Mention.js → examples/Components/Routes/Default/Mention.js
View File

273
examples/Components/Routes/Default/index.vue Normal file
View 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>

15
examples/main.js
View File

@ -1,5 +1,6 @@
import '@babel/polyfill' import '@babel/polyfill'
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router'
import svgSpriteLoader from 'helpers/svg-sprite-loader' import svgSpriteLoader from 'helpers/svg-sprite-loader'
import App from './App.vue' import App from './App.vue'
@ -8,6 +9,20 @@ svgSpriteLoader(__svg__.filename)
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: () => import('Components/Routes/Default'),
},
]
const router = new VueRouter({
routes,
})
new Vue({ new Vue({
router,
render: h => h(App), render: h => h(App),
}).$mount('#app') }).$mount('#app')

9
package.json
View File

@ -34,9 +34,10 @@
}, },
"babel": { "babel": {
"presets": [ "presets": [
[ "@babel/preset-env"
"@babel/preset-env" ],
] "plugins": [
"@babel/plugin-syntax-dynamic-import"
] ]
}, },
"postcss": { "postcss": {
@ -52,6 +53,7 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.0.0-rc.2", "@babel/core": "^7.0.0-rc.2",
"@babel/node": "^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/plugin-transform-runtime": "^7.0.0-rc.2",
"@babel/polyfill": "^7.0.0-rc.2", "@babel/polyfill": "^7.0.0-rc.2",
"@babel/preset-env": "^7.0.0-rc.2", "@babel/preset-env": "^7.0.0-rc.2",
@ -94,6 +96,7 @@
"uglify-js": "^3.4.7", "uglify-js": "^3.4.7",
"vue": "^2.5.17", "vue": "^2.5.17",
"vue-loader": "^15.2.4", "vue-loader": "^15.2.4",
"vue-router": "^3.0.1",
"vue-style-loader": "^4.1.0", "vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.17", "vue-template-compiler": "^2.5.17",
"webpack": "^4.15.1", "webpack": "^4.15.1",

10
yarn.lock
View File

@ -292,6 +292,12 @@
dependencies: dependencies:
"@babel/helper-plugin-utils" "7.0.0-rc.2" "@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": "@babel/plugin-syntax-json-strings@7.0.0-rc.2":
version "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" 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-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.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: vue-style-loader@^4.1.0:
version "4.1.2" version "4.1.2"
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8" resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"