2024-10-10 17:37:22 +09:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html
|
|
|
|
|
xmlns:th="http://www.thymeleaf.org"
|
|
|
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
2025-08-04 16:35:49 +09:00
|
|
|
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
|
2024-10-10 17:37:22 +09:00
|
|
|
layout:decorate="~{layout/default_layout}"
|
|
|
|
|
>
|
2024-10-21 17:25:49 +09:00
|
|
|
<th:block layout:fragment="head">
|
2025-08-05 16:14:01 +09:00
|
|
|
|
2024-10-25 18:28:25 +09:00
|
|
|
<script type="text/javascript" th:src="@{/js/blog.js}"></script>
|
|
|
|
|
<link th:href="@{/css/blog.css}" rel="stylesheet" />
|
2025-08-05 16:14:01 +09:00
|
|
|
<!-- 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>
|
2024-10-10 17:37:22 +09:00
|
|
|
<script th:inline="javascript">
|
2025-08-05 16:14:01 +09:00
|
|
|
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';
|
|
|
|
|
}
|
2024-11-07 14:01:21 +09:00
|
|
|
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;
|
2025-08-05 16:14:01 +09:00
|
|
|
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));
|
|
|
|
|
|
2024-11-07 14:01:21 +09:00
|
|
|
$('#title_layer').text(baseData.title)
|
2025-03-20 17:57:55 +09:00
|
|
|
|
2025-08-05 16:14:01 +09:00
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-10-10 17:37:22 +09:00
|
|
|
});
|
2025-08-05 16:14:01 +09:00
|
|
|
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';
|
|
|
|
|
});
|
2024-10-10 17:37:22 +09:00
|
|
|
</script>
|
2024-10-21 17:25:49 +09:00
|
|
|
</th:block>
|
|
|
|
|
<th:block layout:fragment="content" id="content">
|
2025-03-20 17:57:55 +09:00
|
|
|
<section class="wrapper style2">
|
2025-03-21 17:15:55 +09:00
|
|
|
|
2025-08-04 16:35:49 +09:00
|
|
|
<div class="container" sec:authorize="isAuthenticated()" onclick="loadEditor()">
|
2025-03-21 17:15:55 +09:00
|
|
|
<header class="major">
|
|
|
|
|
<h2 id="title_layer" th:text="${srcPost.title}">A gigantic heading you can use for whatever</h2>
|
|
|
|
|
<p th:text="${#temporals.format(T(java.time.Instant).ofEpochMilli(srcPost.writeTime).atZone(T(java.time.ZoneId).systemDefault()).toLocalDateTime(), 'yyyy-MM-dd HH:mm:ss')}"></p>
|
|
|
|
|
</header>
|
|
|
|
|
</div>
|
2025-08-04 16:35:49 +09:00
|
|
|
<div class="container" sec:authorize="isAnonymous()" onclick="openLoginPopup('login')">
|
2025-03-21 17:15:55 +09:00
|
|
|
<header class="major">
|
2025-03-20 17:57:55 +09:00
|
|
|
<h2 id="title_layer" th:text="${srcPost.title}">A gigantic heading you can use for whatever</h2>
|
|
|
|
|
<p th:text="${#temporals.format(T(java.time.Instant).ofEpochMilli(srcPost.writeTime).atZone(T(java.time.ZoneId).systemDefault()).toLocalDateTime(), 'yyyy-MM-dd HH:mm:ss')}"></p>
|
|
|
|
|
</header>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2025-03-19 18:27:39 +09:00
|
|
|
<section class="wrapper style1">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div id="content">
|
|
|
|
|
<article>
|
|
|
|
|
<div id="editor" ></div>
|
|
|
|
|
<div class="write_controllbox">
|
|
|
|
|
<div class="write_option btn-example" to="#popLayer1" onclick="openPopup(this)" ></div>
|
|
|
|
|
<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>
|
2025-08-05 16:14:01 +09:00
|
|
|
<div class="write_option" id="location_field" ></div>
|
2025-03-19 18:27:39 +09:00
|
|
|
</div>
|
2025-03-20 17:57:55 +09:00
|
|
|
<h3 id="write" th:text="${srcPost.firstAddress}"></h3>
|
|
|
|
|
<h3 id="modify" th:text="${srcPost.modifyAddress}"></h3>
|
2025-03-19 18:27:39 +09:00
|
|
|
</article>
|
|
|
|
|
</div>
|
2024-10-23 10:07:45 +09:00
|
|
|
</div>
|
2025-03-19 18:27:39 +09:00
|
|
|
</section>
|
2024-10-21 17:25:49 +09:00
|
|
|
</th:block>
|
2024-10-10 17:37:22 +09:00
|
|
|
</html>
|
