b4e41afd17
There are no default types for TextAlign extension anymore. You have to configure by yourself. Usually something like:
```js
TextAlign.configure({
types: ['heading', 'paragraph'],
})
```
65 lines
1.7 KiB
Vue
65 lines
1.7 KiB
Vue
<template>
|
|
<div v-if="editor">
|
|
<button @click="editor.chain().focus().setTextAlign('left').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }">
|
|
left
|
|
</button>
|
|
<button @click="editor.chain().focus().setTextAlign('center').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }">
|
|
center
|
|
</button>
|
|
<button @click="editor.chain().focus().setTextAlign('right').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }">
|
|
right
|
|
</button>
|
|
<button @click="editor.chain().focus().setTextAlign('justify').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'justify' }) }">
|
|
justify
|
|
</button>
|
|
<button @click="editor.chain().focus().unsetTextAlign().run()">
|
|
set default
|
|
</button>
|
|
<editor-content :editor="editor" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
|
import Document from '@tiptap/extension-document'
|
|
import Paragraph from '@tiptap/extension-paragraph'
|
|
import Heading from '@tiptap/extension-heading'
|
|
import Text from '@tiptap/extension-text'
|
|
import TextAlign from '@tiptap/extension-text-align'
|
|
|
|
export default {
|
|
components: {
|
|
EditorContent,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
editor: null,
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.editor = new Editor({
|
|
extensions: [
|
|
Document,
|
|
Paragraph,
|
|
Text,
|
|
Heading,
|
|
TextAlign.configure({
|
|
types: ['heading', 'paragraph'],
|
|
}),
|
|
],
|
|
content: `
|
|
<h2>Heading</h2>
|
|
<p style="text-align: center">first paragraph</p>
|
|
<p style="text-align: right">second paragraph</p>
|
|
`,
|
|
})
|
|
},
|
|
|
|
beforeDestroy() {
|
|
this.editor.destroy()
|
|
},
|
|
}
|
|
</script>
|