tiptap editor > Get html, title, subtitle slot 사용법

components/editor/BasicMenu.vue

@@ -42,9 +42,7 @@
         @click="commands.redo">
         <icon name="redo" size="large" />
       </button>
-      <button class="button is-success button-save">
-        Save
-      </button>
+      <slot name="saveButton"></slot>
     </div>
   </editor-menu-bar>
 </template>
@@ -59,14 +57,5 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-  .button-save {
-    float: right;
-    background-color: #23d160;
-    &:hover {
-      background-color: #2bc76c;
-    }
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
+
 </style>

components/editor/index.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="editor editor-squished">
-    <basic-menu :editor="editor" />
+    <basic-menu :editor="editor">
+      <template #saveButton>
+        <button
+          @click="emitUpdate"
+          class="button is-success button-save">
+          Save
+        </button>
+      </template>
+    </basic-menu>
     <bubble-menu :editor="editor" />
     <editor-content
       class="editor__content"
@@ -91,6 +99,34 @@ export default {
   beforeDestroy(){
     // Always destroy your editor instance when it's no longer needed
     this.editor && this.editor.destroy()
+  },
+  methods: {
+    emitUpdate() {
+      const html = this.editor.getHTML()
+      const title = this.getNodeValueByName('title')
+      const subtitle = this.getNodeValueByName('subtitle')
+      this.$emit('editorUpdated', {content: html, title, subtitle})
+    },
+    getNodeValueByName(name) {
+      const docContent = this.editor.state.doc.content
+      const nodes = docContent.content
+      const node = nodes.find(n => n.type.name === name)
+      if (!node) return ''
+      return node.textContent
+    }
   }
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+  .button-save {
+    float: right;
+    background-color: #23d160;
+    &:hover {
+      background-color: #2bc76c;
+    }
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+</style>

pages/instructor/blog/editor.vue

@@ -6,7 +6,7 @@
     />
     <div class="blog-editor-container">
       <div class="container">
-        <Editor />
+        <editor @editorUpdated="saveBlog"/>
       </div>
     </div>
   </div>
@@ -19,6 +19,11 @@ export default {
   layout: 'instructor',
   components: {
     Header, Editor
+  },
+  methods: {
+    saveBlog({content, title, subtitle}) {
+      debugger;
+    }
   }
 }
 </script>