[ckeditor 5, spring] 두 개의 테이블이 있을 때 editor 내용 db로 보내기

두 개의 테이블을 from 이라는 구분자를 두고 한 페이지에서 받으려고 한다.

1. 첫 실수 from 을 controller에 같이 보내지 않은 것

HTML

<form th:action="@{/reservation/writeInsert" id="submitForm" method="post">
	 <table  th:if="${from == 'qna'}">
     </table>
     
     <table  th:if="${from == 'review'}">
     </table>
</form>

@Controller

@GetMapping("/write")
    public String write( Model model ) {

        if ("qna".equals(from)) {  log.info("qna 글쓰기");
        } else if ("review".equals(from)) { log.info("review 글쓰기"); }

        model.addAttribute("from", from);
            
        return "/guest/write";
    }

 

이렇게 해서 해당하는 write 페이지에 넘어가지 않았었다.

해결 방법은 from을 같이 받아주어 나누면 되고, 보내는 방법은 아래와 같다.

<form th:action="@{/reservation/writeInsert(from=${from})" id="submitForm" method="post">
	 <table  th:if="${from == 'qna'}">
     </table>
     
     <table  th:if="${from == 'review'}">
     </table>
</form>

@GetMapping("/write")
    public String write(
        @RequestParam(value="from", required = false) String from, Model model ) {

            if ("qna".equals(from)) {  log.info("qna 글쓰기");
            } else if ("review".equals(from)) { log.info("review 글쓰기"); }

            model.addAttribute("from", from);
            
        return "/guest/write";
    }

 

2. db를 연결했지만, ckeditor 내용이 db로 넘어가지 않았다.

검색을 해도 잘 나오지 않았고 gpt 를 검색해도 db로 넘어오지 않거나 form 제출이 아예 되지 않았다.
여기서 내 코드와 다른 사람들의 코드는 두 가지 테이블이 있다는 점이었고 그 점에서 form에 같은 editor id를 두고 같은 id를 쓰고 있다는 점이 문제라는 것을 깨달았다.

앞의 HTML 이 문제의 form 이다.

<form th:action="@{/reservation/writeInsert(from=${from})" id="submitForm" method="post">
	 <table  th:if="${from == 'qna'}">
     </table>
     
     <table  th:if="${from == 'review'}">
     </table>
</form>

 

해결방법

두가지의 form을 사용하여 처리 하면 된다.

 <form th:action="@{/reservation/writeInsert(from=${from})}" id="qnaSubmitForm" method="post">
        <table  th:if="${from == 'qna'}">
       	 	<tr>
				<td colspan="4"><input type="text" name="title" id="qnaTitle" placeholder="제목을 입력해주세요." required></td>
			</tr>
            <tr>
                <td colspan="4"><div id="qnaEditor"></div></td>
                <input type="hidden" name="detail" id="qnaDetail">
            </tr>
        </table>
        <div class="button" th:if="${from == 'qna'}">
            <button class="submit" id="qnaSubmit" type="submit">제출</button>
        </div>
 </form>
 
 <form th:action="@{/reservation/writeInsert(from=${from})}" id="reviewSubmitForm" method="post" enctype="multipart/form-data" >
    <table th:if="${from=='review'}">
        <tr>
            <td>이름<span>*</span></td>
            <td><input type="text" name="reviewer" id="reviewer" placeholder="홍길동" required></td>
            <td>핸드폰 번호<span>*</span></td>
            <td><input type="text" name="phone" id="phone" placeholder="01012345678" required></td> 
        </tr>
        <tr>
            <td colspan="4"><input type="text" name="title" id="reviewTitle" placeholder="제목을 입력해주세요." required></td>
        </tr>
        <tr>
            <td colspan="4"><div name="editor" id="reviewEditor"></div></td>
            <input type="hidden" name="detail" id="reviewDetail">
        </tr>
    </table>
    <div class="button" th:if="${from=='review'}">
        <button class="submit" id="reviewSubmit" type="submit">제출</button>
    </div>
</form>

document.addEventListener("DOMContentLoaded", function() {

    let ckEditorInstanceQna; // CKEditor 인스턴스 변수 선언
    let ckEditorInstanceReview; // CKEditor 인스턴스 변수 선언

    // 질문글 에디터
    ClassicEditor
        .create(document.querySelector('#qnaEditor'), {
            language: 'ko',
            enterMode: 'paragraph' // 엔터 키 동작을 문단 생성으로 설정
        })
        .then(editor => {
            ckEditorInstanceQna = editor; // CKEditor 인스턴스 할당
        });

    // 리뷰 에디터
    ClassicEditor
        .create(document.querySelector('#reviewEditor'), {
            language: 'ko',
            enterMode: 'paragraph' // 엔터 키 동작을 문단 생성으로 설정
        })
        .then(editor => {
            ckEditorInstanceReview = editor; // CKEditor 인스턴스 할당
        });

editor 를 부르는 것도 두 개 부르면 된다.

 

3. 마지막 실수는 간단하다. "왜 태그로 나오지?" 였다.

해결 방법은 th:text 가 아니라 "th:utext" 로 출력 시키면 간단하게 해결 된다.

<tr>
    <td colspan="3" class="detail"><p name="detail" th:utext="${qna.detail}"></p></td>
</tr>

 

까먹기 전에 정리 완료.