...

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

@@ -6,7 +6,6 @@
         layout:decorate="~{layout/default_layout}"
 >
 <th:block layout:fragment="head">
-
     <script type="text/javascript" th:src="@{/js/blog.js}"></script>
     <link th:href="@{/css/blog.css}" rel="stylesheet" />
     <!-- Quill 스타일 시트 -->
@@ -22,65 +21,7 @@
     <!-- 테이블 플러그인 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">
-        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)
-
-            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
-                    }
-                }
-            });
-            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>
+    <script>document.addEventListener('DOMContentLoaded', function() {initEditor()});</script>
 </th:block>
 <th:block layout:fragment="content" id="content">
     <section class="wrapper style2">