tiptap/examples/Components/Routes/Embeds/index.vue

96 lines
1.7 KiB
Vue
Raw Normal View History

2018-08-23 05:12:19 +08:00
<template>
<div>
<editor class="editor" :extensions="extensions" @update="onUpdate">
<div class="editor__content" slot="content" slot-scope="props">
2018-08-23 14:36:10 +08:00
<h2>
2018-08-23 05:12:19 +08:00
Embeds
2018-08-23 14:36:10 +08:00
</h2>
2018-08-23 05:12:19 +08:00
<p>
2018-08-25 05:02:32 +08:00
This is an example of a custom iframe node. This iframe is rendered as a <strong>vue component</strong>. This makes it possible to render the input below to change its source.
2018-08-23 05:12:19 +08:00
</p>
<iframe src="https://www.youtube.com/embed/XIMLoLxmTDw" frameborder="0" allowfullscreen></iframe>
</div>
</editor>
</div>
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
2018-08-24 04:08:19 +08:00
import {
2018-08-27 01:43:02 +08:00
BlockquoteNode,
BulletListNode,
CodeBlockNode,
HardBreakNode,
HeadingNode,
ListItemNode,
OrderedListNode,
TodoItemNode,
TodoListNode,
BoldMark,
CodeMark,
ItalicMark,
LinkMark,
HistoryExtension,
2018-08-24 04:08:19 +08:00
} from 'tiptap-extensions'
2018-08-27 01:43:02 +08:00
import IframeNode from './Iframe.js'
2018-08-23 05:12:19 +08:00
export default {
components: {
Editor,
Icon,
},
data() {
return {
2018-08-24 04:08:19 +08:00
extensions: [
2018-08-27 01:43:02 +08:00
new BlockquoteNode(),
new BulletListNode(),
new CodeBlockNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new ListItemNode(),
new OrderedListNode(),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
new LinkMark(),
new HistoryExtension(),
2018-08-24 04:08:19 +08:00
// custom extension
2018-08-27 01:43:02 +08:00
new IframeNode(),
2018-08-24 04:08:19 +08:00
],
2018-08-23 05:12:19 +08:00
}
},
methods: {
onUpdate(state) {
// console.log(state.doc.toJSON())
},
},
}
</script>
<style lang="scss">
@import "~variables";
.iframe {
&__embed {
width: 100%;
height: 15rem;
border: 0;
}
&__input {
display: block;
width: 100%;
font: inherit;
border: 0;
border-radius: 5px;
background-color: rgba($color-black, 0.1);
padding: 0.3rem 0.5rem;
}
}
</style>