index.vue 680 B

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <div class="editor editor-squished">
  3. <editor-content
  4. class="edito__content"
  5. :editor="editor"
  6. />
  7. </div>
  8. </template>
  9. <script>
  10. import { Editor, EditorContent } from "tiptap";
  11. import { Heading } from 'tiptap-extensions'
  12. export default {
  13. components: {
  14. EditorContent
  15. },
  16. data(){
  17. return {
  18. editor: null
  19. }
  20. },
  21. // This is called only on client (in browser)
  22. mounted(){
  23. this.editor = new Editor({
  24. extensions: [
  25. new Heading({ levels: [1, 2, 3]})
  26. ]
  27. })
  28. },
  29. beforeDestroy(){
  30. // Always destroy your editor instance when it's no longer needed
  31. this.editor && this.editor.destroy()
  32. }
  33. }
  34. </script>