Get content from editor > 컴포넌트간 함수호출시 refs 속성 사용법

components/editor/index.vue

@@ -110,10 +110,14 @@ export default {
   },
   methods: {
     emitUpdate() {
+      const content = this.getContent()
+      this.$emit('editorUpdated', content)
+    },
+    getContent() {
       const html = this.editor.getHTML()
       const title = this.getNodeValueByName('title')
       const subtitle = this.getNodeValueByName('subtitle')
-      this.$emit('editorUpdated', {content: html, title, subtitle})
+      return { html, title, subtitle}
     },
     getNodeValueByName(name) {
       const docContent = this.editor.state.doc.content

pages/instructor/blog/_id/edit.vue

@@ -9,6 +9,7 @@
         <div class="full-page-takeover-header-button">
           <!-- TODO: Check blog validity before publishing -->
           <Modal
+            @submitted="publishBlog"
             @opened="checkBlogValidity"
             openTitle="Publish"
             openBtnClass="button is-success is-medium is-inverted is-outlined"
@@ -81,7 +82,10 @@ export default {
     ...mapState({
       blog: ({instructor}) => instructor.blog.item,
       isSaving: ({instructor}) => instructor.blog.isSaving
-    })
+    }),
+    editor() {
+      return this.$refs.editor
+    }
   },
   async fetch({params, store}){
     await store.dispatch('instructor/blog/fetchBlogById', params.id)
@@ -107,8 +111,12 @@ export default {
         this.$toasted.error('Blog cannot be saved!', {duration: 2000})
       }
     },
+    publishBlog({closeModal}) {
+      const blogContent = this.editor.getContent()
+      debugger
+    },
     checkBlogValidity() {
-      const title = this.$refs.editor.getNodeValueByName('title')
+      const title = this.editor.getNodeValueByName('title')
       this.publishError = ''
       this.slug = ''
       if (title && title.length > 24) {