102 lines
2.4 KiB
Vue
102 lines
2.4 KiB
Vue
<template>
|
||
<div>
|
||
<editor-content :editor="editor" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
|
||
import Highlight from '@tiptap/extension-highlight'
|
||
import Typography from '@tiptap/extension-typography'
|
||
|
||
export default {
|
||
components: {
|
||
EditorContent,
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
editor: null,
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.editor = new Editor({
|
||
content: `
|
||
<p>
|
||
Markdown shortcuts make it easy to format the text while typing.
|
||
</p>
|
||
<p>
|
||
To test that, start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
|
||
</p>
|
||
<p>
|
||
Those conventions are called input rules in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code, <code>~~tildes~~</code> to strike text, or <code>==equal signs==</code> to highlight text.
|
||
</p>
|
||
<p>
|
||
You can overwrite existing input rules or add your own to nodes, marks and extensions.
|
||
</p>
|
||
<p>
|
||
For example, we added the <code>Typography</code> extensions here. Try typing <code>(c)</code> to see how it’s converted to a proper © character. You can also try <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, or <code>--</code>.
|
||
</p>
|
||
`,
|
||
extensions: [
|
||
...defaultExtensions(),
|
||
Highlight,
|
||
Typography,
|
||
],
|
||
})
|
||
},
|
||
|
||
beforeDestroy() {
|
||
this.editor.destroy()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* Basic editor styles */
|
||
.ProseMirror {
|
||
> * + * {
|
||
margin-top: 0.75em;
|
||
}
|
||
|
||
ul,
|
||
ol {
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
code {
|
||
background-color: rgba(#616161, 0.1);
|
||
color: #616161;
|
||
}
|
||
|
||
pre {
|
||
background: #0D0D0D;
|
||
color: #FFF;
|
||
font-family: 'JetBrainsMono', monospace;
|
||
padding: 0.75rem 1rem;
|
||
border-radius: 0.5rem;
|
||
|
||
code {
|
||
color: inherit;
|
||
background: none;
|
||
font-size: 0.8rem;
|
||
}
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
hr {
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
blockquote {
|
||
padding-left: 1rem;
|
||
border-left: 2px solid rgba(#0D0D0D, 0.1);
|
||
}
|
||
}
|
||
</style>
|