tiptap/docs/src/demos/Extensions/Strike/index.vue

54 lines
1.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div v-if="editor">
<button @click="editor.focus().strike()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor } from '@tiptap/core'
import { EditorContent } from '@tiptap/vue'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Strike from '@tiptap/extension-strike'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
Document(),
Paragraph(),
Text(),
Strike(),
],
content: `
<p>This isnt striked through.</s></p>
<p><s>But thats striked through.</s></p>
<p><del>And this.</del></p>
<p><strike>This too.</strike></p>
<p style="text-decoration: line-through">This as well.</p>
`,
})
window.editor = this.editor
},
beforeDestroy() {
this.editor.destroy()
}
}
</script>