editor emit 추가

src/common/utils.js

@@ -0,0 +1,7 @@
+export const wait = timeToDelay => new Promise(resolve => setTimeout(resolve, timeToDelay));
+
+export const isEmpty = (value) => {
+    if (value == "" || value == null || value == undefined || (value != null && typeof value == "object" && !Object.keys(value).length))
+        return true;
+    return false;
+}

src/components/editor/TEditor.vue

@@ -1,11 +1,15 @@
 <template>
-    <Editor :api-key="editorKey" :init="init" />
+    <Editor v-model="content"
+    :api-key="editorKey" :init="init" />
 </template>
 
 <script setup>
 import Editor from '@tinymce/tinymce-vue';
-import { nextTick, onBeforeUnmount, onMounted, reactive } from 'vue';
+import { reactive, ref, watch, watchEffect } from 'vue';
+import { wait } from '@/common/utils';
 
+const emit = defineEmits(['update:data']);
+const content = ref('');
 const editorKey = '71nhna4fusscfsf8qvo9cg3ul4uydwt346izxa6ra6zwjsz7';
 const init = reactive({
     menubar: false,
@@ -94,12 +98,14 @@ const init = reactive({
             styles: { 'text-align': 'justify' },
         },
     },
-
     setup(editor) {
         editor.on('init', async () => {
             //가상돔 로딩 기다리기
             await wait(500);
             const targetElement = document.querySelector('[aria-label="Insert/edit code sample"]');
+
+            //editor.notificationManager  <-- editor 경고문 띄우는 용도
+
             targetElement.addEventListener('click', async () => {
                 // 클릭 후 기다리기
                 await wait(200);
@@ -139,15 +145,17 @@ const init = reactive({
                 }
             });
         });
+
     },
 });
 
-const wait = timeToDelay => new Promise(resolve => setTimeout(resolve, timeToDelay));
+watchEffect(() =>{
+    emit('update:data', content.value)
+})
 
 // emit 이랑 file 처리해야됨 ~
 </script>
 
 
 <style scoped>
-
 </style>

src/components/input/FormInput.vue

@@ -52,14 +52,14 @@ const prop = defineProps({
     },
 });
 
-const emits = defineEmits(['inputVal'])
+const emits = defineEmits(['update:data'])
 
 const updateInput = function (event) {
     //Type Number 일때 maxlength 적용 안됨 방지
     if (event.target.value.length > prop.maxlength) {
         event.target.value = event.target.value.slice(0, prop.maxlength);
     }
-    emits('inputVal', event.target.value);
+    emits('update:data', event.target.value);
 };
 </script>
 

src/components/input/FormSelect.vue

@@ -43,14 +43,13 @@ const prop = defineProps({
     },
 });
 
-const emit = defineEmits(['selectVal'])
+const emit = defineEmits(['update:data'])
 const selectData = ref(prop.value);
 
 watchEffect(() => {
-    emit('selectVal',selectData);
+    emit('update:data',selectData);
 })
 
-
 </script>
 
 <style>

src/views/board/BoardWrite.vue

@@ -9,11 +9,11 @@
 
             <div class="col-xl-12">
                 <div class="card-body">
-                    <FormInput title="제목" name="title" :is-essential="true" @input-val="title = $event" />
+                    <FormInput title="제목" name="title" :is-essential="true" @update:data="title = $event" />
 
-                    <FormSelect title="카테고리" name="cate" :is-essential="true" :data="categoryList" @select-val="category = $event" />
+                    <FormSelect title="카테고리" name="cate" :is-essential="true" :data="categoryList" @update:data="category = $event" />
 
-                    <FormInput title="비밀번호" name="pw" type="password" :is-essential="true" @input-val="password = $event" />
+                    <FormInput title="비밀번호" name="pw" type="password" :is-essential="true" @update:data="password = $event" />
 
                     <FormFile />
 
@@ -23,7 +23,7 @@
                             <span class="text-red">*</span>
                         </label>
                         <div class="col-md-12">
-                            <TEditor />
+                            <TEditor @update:data="content = $event"/>
                         </div>
                     </div>
 
@@ -49,6 +49,7 @@ const categoryList = ['자유', '임시', '공지사항'];
 const title = ref('');
 const password = ref('');
 const category = ref('');
+const content = ref('');
 </script>
 
 <style>