...

src/main/resources/templates/content/blog/viewer.html

@@ -6,34 +6,80 @@
         layout:decorate="~{layout/default_layout}"
 >
 <th:block layout:fragment="head">
-    <script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
-    <link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
+
     <script type="text/javascript" th:src="@{/js/blog.js}"></script>
     <link th:href="@{/css/blog.css}" rel="stylesheet" />
+    <!-- Quill 스타일 시트 -->
+    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
+
+    <!-- Quill 라이브러리 -->
+    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
+    <!-- HTML 에디터 영역 -->
+    <!--    <div id="editor-container" style="height: 300px;"></div>-->
+    <!-- Quill 라이브러리 및 테마 -->
+    <link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
+    <!-- 테이블 플러그인 CSS & JS -->
+    <link href="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.css" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.js"></script>
     <script th:inline="javascript">
-        let editor
-        let onChange = () => {console.log(editor.getMarkdown())}
-        document.addEventListener("DOMContentLoaded", onLoaded);
-        function onLoaded() {
+        var quill = null
+        document.addEventListener('DOMContentLoaded', function() {
+            const editorContainer = document.querySelector('#editor');
+            function setEditorHeight() {
+                const height = Math.max(window.innerHeight * 0.5, 300);
+                editorContainer.style.height = height + 'px';
+            }
             baseData.title = [[${srcPost.title}]];
             baseData.content = [[${srcPost.content}]];
             baseData.firstPostLon = [[${srcPost.firstPostLon}]];
             baseData.firstPostLat = [[${srcPost.firstPostLat}]];
             document.getElementById('location_field').textContent = "Lat: " + baseData.firstPostLat + ", Lon: " + baseData.firstPostLon;
+            var requestOptions = {
+                method: 'GET',
+            };
+
+            fetch("https://api.geoapify.com/v1/geocode/reverse?lat="+baseData.firstPostLat+"&lon="+baseData.firstPostLon+"&apiKey=2b37a75bb0754086b5a1c4a7c3173ee8", requestOptions)
+                .then(response => response.json())
+                .then(function(result) {
+                    try {
+                        document.getElementById('location_field').textContent = result.features[0].properties.formatted
+                    } catch (e) {
+                        document.getElementById('location_field').innerHTML = "Lat: " + baseData.firstPostLat + "<br> Lon: " + baseData.firstPostLon;
+                    }
+                })
+                .catch(error => console.log('error', error));
+
             $('#title_layer').text(baseData.title)
 
-            editor = new toastui.Editor({
-                el: document.querySelector('#editor'),
-                height: '100%',
-                width:'100%',
-                viewer: true,
-                usageStatistics : false,
-                initialValue:baseData.content,
+            setEditorHeight();
+            window.addEventListener('resize', setEditorHeight);
+            var Font = Quill.import('formats/font');
+            Font.whitelist = ['sans-serif', 'serif', 'monospace', 'arial', 'georgia', 'comic-sans-ms', 'courier-new','roboto', 'playfair-display'];
+            Quill.register(Font, true);
+            Quill.register({ 'modules/table-better': QuillTableBetter }, true);
+
+            quill = new Quill(editorContainer, {
+                theme: 'snow',
+                modules: {
+                    toolbar: [],
+                    'table-better': {
+                        language: 'en_US',
+                        toolbarTable: true
+                    },
+                    keyboard: {
+                        bindings: QuillTableBetter.keyboardBindings
+                    }
+                }
             });
-        }
-        function loadEditor() {
-            goToEditor([[${srcPost.id}]]);
-        }
+            quill.enable(false)
+            if (isDelta(baseData.content)) {
+                quill.setContents(baseData.content);                  // Delta 데이터라면 setContents
+            } else {
+                quill.clipboard.dangerouslyPasteHTML(baseData.content); // HTML 데이터라면 dangerouslyPasteHTML
+            }
+            document.querySelector('.ql-toolbar').style.display = 'none';
+        });
     </script>
 </th:block>
 <th:block layout:fragment="content" id="content">
@@ -62,7 +108,7 @@
                         <div style="width: 15px" ></div>
                         <div class="write_option btn-example" to="#popLayer2" onclick="openPopup(this)" id="hashtag_field"></div>
                         <div style="width: 15px" ></div>
-                        <label class="write_option" readonly id="location_field"></label>
+                        <div class="write_option" id="location_field" ></div>
                     </div>
                     <h3 id="write" th:text="${srcPost.firstAddress}"></h3>
                     <h3 id="modify" th:text="${srcPost.modifyAddress}"></h3>