tiptap/examples/Components/Routes/Placeholder/index.vue
2018-09-06 23:01:52 +02:00

39 lines
642 B
Vue

<template>
<div>
<editor class="editor" :extensions="extensions">
<div class="editor__content" slot="content" slot-scope="props"></div>
</editor>
</div>
</template>
<script>
import { Editor } from 'tiptap'
import { PlaceholderExtension } from 'tiptap-extensions'
export default {
components: {
Editor,
},
data() {
return {
extensions: [
new PlaceholderExtension({
emptyNodeClass: 'is-empty',
}),
],
}
},
}
</script>
<style lang="scss">
.editor p.is-empty:first-child::before {
content: 'Start typing…';
float: left;
color: #aaa;
pointer-events: none;
height: 0;
font-style: italic;
}
</style>