2018-08-24 04:08:19 +08:00
|
|
|
import { Node } from 'tiptap'
|
2018-08-23 05:12:19 +08:00
|
|
|
|
2018-10-24 13:46:47 +08:00
|
|
|
export default class Iframe extends Node {
|
2018-08-23 05:12:19 +08:00
|
|
|
|
2018-11-09 05:03:10 +08:00
|
|
|
get name() {
|
|
|
|
return 'iframe'
|
|
|
|
}
|
2018-08-23 05:12:19 +08:00
|
|
|
|
2018-11-09 05:03:10 +08:00
|
|
|
get schema() {
|
|
|
|
return {
|
|
|
|
attrs: {
|
|
|
|
src: {
|
|
|
|
default: null,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
group: 'block',
|
|
|
|
selectable: false,
|
|
|
|
parseDOM: [{
|
|
|
|
tag: 'iframe',
|
|
|
|
getAttrs: dom => ({
|
|
|
|
src: dom.getAttribute('src'),
|
|
|
|
}),
|
|
|
|
}],
|
|
|
|
toDOM: node => ['iframe', {
|
|
|
|
src: node.attrs.src,
|
|
|
|
frameborder: 0,
|
|
|
|
allowfullscreen: 'true',
|
|
|
|
}],
|
|
|
|
}
|
|
|
|
}
|
2018-08-23 05:12:19 +08:00
|
|
|
|
2018-11-09 05:03:10 +08:00
|
|
|
get view() {
|
|
|
|
return {
|
|
|
|
props: ['node', 'updateAttrs', 'editable'],
|
2018-11-14 19:09:07 +08:00
|
|
|
computed: {
|
|
|
|
src: {
|
|
|
|
get() {
|
|
|
|
return this.node.attrs.src
|
|
|
|
},
|
|
|
|
set(src) {
|
|
|
|
this.updateAttrs({
|
|
|
|
src,
|
|
|
|
})
|
|
|
|
},
|
2018-11-09 05:03:10 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
template: `
|
|
|
|
<div class="iframe">
|
2018-11-14 19:09:07 +08:00
|
|
|
<iframe class="iframe__embed" :src="src"></iframe>
|
2019-02-18 23:17:47 +08:00
|
|
|
<input class="iframe__input" @paste.stop type="text" v-model="src" v-if="editable" />
|
2018-11-09 05:03:10 +08:00
|
|
|
</div>
|
|
|
|
`,
|
|
|
|
}
|
|
|
|
}
|
2018-08-23 05:12:19 +08:00
|
|
|
|
|
|
|
}
|