...

2024-10-07 18:47:23 +09:00
parent 68d4c40f85
commit c5de7a3548
8 changed files with 241 additions and 7 deletions
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout/default_layout}">
+
+<th:block layout:fragment="head">
+    <!-- TOAST UI Editor CDN(JS) -->
+    <!--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>-->
+    <!--    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
+    <!--    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
+    <script type="text/javascript"   src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
+    <script type="text/javascript"  src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
+    <!-- TOAST UI Editor CDN(CSS) -->
+    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
+    <title>Spring Boot</title>
+    <script th:inline="javascript">
+
+        function onLoaded() {
+            // const onChange = () => {
+            //     const editorHtml = editor.getHTML();
+            //     setHtml(editorHtml);
+            // };
+            const editor = new toastui.Editor({
+                el: document.querySelector('#editor'),
+                previewStyle: 'vertical',
+                height: '500px',
+                usageStatistics : false,
+                initialValue: "",
+                // events : {
+                //   change : this.onChange
+                // },
+                hooks: {
+                    addImageBlobHook: (blob, callback) => {
+                        // blob : Java Script 파일 객체
+                        //console.log(blob);
+
+                        const formData = new FormData();
+                        formData.append('file', blob);
+
+                        let url = '/files/';
+                        $.ajax({
+                            type: 'POST',
+                            enctype: 'multipart/form-data',
+                            url: 'blog/post/imageUpload',
+                            data: formData,
+                            dataType: 'json',
+                            processData: false,
+                            contentType: false,
+                            cache: false,
+                            timeout: 600000,
+                            success: function (data) {
+                                //console.log('ajax 이미지 업로드 성공');
+                                url += data.fileName;
+                                fileIds += data.id + ",";
+                                // callback : 에디터(마크다운 편집기)에 표시할 텍스트, 뷰어에는 imageUrl 주소에 저장된 사진으로 나옴
+                                // 형식 : ![대체 텍스트](주소)
+                                callback(url, '사진 대체 텍스트 입력');
+                            },
+                            error: function (e) {
+                                //console.log('ajax 이미지 업로드 실패');
+                                //console.log(e.abort([statusText]));
+
+                                callback('image_load_fail', '사진 대체 텍스트 입력');
+                            }
+                        });
+                    }
+                }
+            });
+        }
+    </script>
+    <link th:href="@{/css/common.css}" rel="stylesheet" />
+    <script type="text/javascript" th:src="@{/js/common.js}"></script>
+    <script type="text/javascript" th:src="@{/js/user.js}"></script>
+</th:block>
+<body onload="onLoaded()">
+<th:block layout:fragment="header" th:include="@{/fragments/header}"></th:block>
+    <div layout:fragment='content' class='content' id='content'>
+        <div id="editor">
+
+        </div>
+
+    </div>
+<th:block layout:fragment="footer" th:include="@{/fragments/footer}"></th:block>
+</body>
+</html>