처음부터 블로그 게시물 편집기 만들기. 1부: 최소한의 것

소개

GitHub

유튜브 버전

최소한의

구축 방법

<form th:action="@{/admin/blogPost/create}" th:object="${blogPost}" method="post">
        <input type="text" th:field="*{title}" id="title" name="title" placeholder="title" class="editorInput">
        <input type="submit"/>
        <textarea id="my_text_area" th:field="*{body}"  name="story" rows="50" cols="90"></textarea>

</form>
<div id="editDisplay" class="display">

    </div>

자바스크립트

<script th:inline="javascript">
/*<![CDATA[*/
    const textArea = document.getElementById('my_text_area');
    const editDisplay = document.getElementById('editDisplay');

textArea.addEventListener('input', () => {

    editDisplay.innerHTML = textArea.value;
})

/*]]>*/
</script>

데이터베이스 스키마

@Entity(name = "blogpost")
public class BlogPost extends AbstractEntity{

    public BlogPost(){}

    private String title;

    @Lob
    private String body;
    private Integer seriesNumber;
    private Date dateCreated;

    @ManyToOne
    @JoinColumn
    private Series series;

//getters and setters below
}

결론