103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
<template>
|
||
<editor-content :editor="editor" />
|
||
</template>
|
||
|
||
<script>
|
||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||
import Document from '@tiptap/extension-document'
|
||
import Paragraph from '@tiptap/extension-paragraph'
|
||
import Text from '@tiptap/extension-text'
|
||
import Code from '@tiptap/extension-code'
|
||
import Typography from '@tiptap/extension-typography'
|
||
import { ColorHighlighter } from './ColorHighlighter'
|
||
import { SmilieReplacer } from './SmilieReplacer'
|
||
|
||
export default {
|
||
components: {
|
||
EditorContent,
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
editor: null,
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.editor = new Editor({
|
||
extensions: [
|
||
Document,
|
||
Paragraph,
|
||
Text,
|
||
Code,
|
||
Typography,
|
||
ColorHighlighter,
|
||
SmilieReplacer,
|
||
],
|
||
content: `
|
||
<p>
|
||
→ With the Typography extension, tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
|
||
</p>
|
||
<p>
|
||
Try it out and type <code>(c)</code>, <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, <code>--</code> or <code>1x1</code> here:
|
||
</p>
|
||
<p></p>
|
||
<p>
|
||
Or add completely custom input rules. We added a custom extension here that replaces smilies like <code>:-)</code>, <code><3</code> or <code>>:P</code> with emojis. Try it out:
|
||
</p>
|
||
<p></p>
|
||
<p>
|
||
You can also teach the editor new things. For example to recognize hex colors and add a color swatch on the fly: #FFF, #0D0D0D, #616161, #A975FF, #FB5151, #FD9170, #FFCB6B, #68CEF8, #80cbc4, #9DEF8F
|
||
</p>
|
||
|
||
`,
|
||
})
|
||
},
|
||
|
||
beforeDestroy() {
|
||
this.editor.destroy()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* Basic editor styles */
|
||
.ProseMirror {
|
||
> * + * {
|
||
margin-top: 0.75em;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
line-height: 1.1;
|
||
}
|
||
|
||
code {
|
||
background-color: rgba(#616161, 0.1);
|
||
color: #616161;
|
||
}
|
||
}
|
||
|
||
/* Color swatches */
|
||
.color {
|
||
white-space: nowrap;
|
||
|
||
&::before {
|
||
content: ' ';
|
||
display: inline-block;
|
||
width: 1em;
|
||
height: 1em;
|
||
border: 1px solid rgba(128, 128, 128, 0.3);
|
||
vertical-align: middle;
|
||
margin-right: 0.1em;
|
||
margin-bottom: 0.15em;
|
||
border-radius: 2px;
|
||
background-color: var(--color);
|
||
}
|
||
}
|
||
</style>
|