This commit is contained in:
2025-08-08 17:11:34 +09:00
parent 182ea90dd3
commit 9cb482ac6a
25 changed files with 300 additions and 40484 deletions
@@ -7,72 +7,22 @@
layout:decorate="~{layout/default_layout}"
>
<th:block layout:fragment="head" id="head">
<script type="text/javascript" th:src="@{/js/toast-ui.js}"></script>
<script type="text/javascript" th:src="@{/js/blog.js}"></script>
<link th:href="@{/css/blog.css}" rel="stylesheet" />
<link th:href="@{/css/toast-ui.css}" rel="stylesheet" />
<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
<!-- <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-dark.css" />-->
<script th:inline="javascript" >
<!-- Quill 스타일 시트 -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
var editor
document.addEventListener("DOMContentLoaded", onLoaded);
function onLoaded() {
baseData.id = [[${srcPost.id}]];
baseData.title = urldecode([[${srcPost.title}]]);
baseData.content = urldecode([[${srcPost.content}]]);
baseData.firstPostLat = [[${srcPost.firstPostLat}]];
baseData.firstPostLon = [[${srcPost.firstPostLon}]];
baseData.writeTime = [[${srcPost.writeTime}]];
getLocation()
// var style = getComputedStyle(document.body)
// console.log(style.getPropertyValue('--ContentVerticalMargin'))
// console.log(window.c)
// console.log(style.getPropertyValue('--FooterHeight'))
// console.log(style.getPropertyValue('--TopHeight'))
editor = new toastui.Editor({
el: document.querySelector('#editor'),
previewStyle: 'tab',
height: '900px',
width:'95%',
usageStatistics : false,
toolbar:null,
initialValue:baseData.content,
initialEditType:"wysiwyg",
hooks: {
addImageBlobHook: (blob, callback) => {
const formData = new FormData();
formData.append('file', blob);
let uploadUrl = getMainPath() + "/blog/post/imageUpload";
let imageUrl = getMainPath() + '/blog/post/images/';
$.ajax({
type: 'POST',
enctype: 'multipart/form-data',
url: uploadUrl,
data: formData,
dataType: 'json',
processData: false,
contentType: false,
cache: false,
timeout: 600000,
success: function (data) {
imageUrl += data.fileName;
callback(imageUrl, '사진 대체 텍스트 입력');
},
error: function (e) {
callback('image_load_fail', '사진 대체 텍스트 입력');
}
});
}
}
});
}
function save() {
console.log(editor.getHTML())
console.log(editor.getMarkdown())
onclickWrite([[${enc}]],[[${keyword}]],editor.getMarkdown())
}
</script>
<!-- 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>document.addEventListener('DOMContentLoaded', function() {initEditor(true)});</script>
</th:block>
<th:block layout:fragment="content" id="content">
@@ -7,30 +7,7 @@
<th:block layout:fragment="head">
<script type="text/javascript" th:src="@{/js/blog.js}"></script>
<link th:href="@{/css/blog.css}" rel="stylesheet" />
<script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
<script th:inline="javascript">
let editor
document.addEventListener("DOMContentLoaded", onLoaded);
function onLoaded() {
var els = document.getElementsByClassName('content')
for (i=0;i<els.length;i++) {
var item = $(els[i])
console.log(item[0])
console.log(item.attr("data"))
new toastui.Editor({
el: item[0],
width : (item[0].getBoundingClientRect().width * 0.8) + 'px',
height : (item[0].getBoundingClientRect().width * 0.8) + 'px',
viewer: true,
usageStatistics : false,
initialValue: item.attr("data"),
theme:"dark",
});
}
}
</script>
</th:block>
<th:block layout:fragment="content" id="content">
<div id="main_layer">
@@ -38,17 +15,18 @@
<h1>권한이 없는 뎁쇼?!</h1>
</th:block>
<th:block sec:authorize="isAuthenticated()">
<div class="post_layer">
<th:block class="posts_layer" id="posts" th:each="posts ,postsStat: ${chunkedPosts}">
<th:block class="posts_layer" th:class="${#strings.append(rowKey,postsStat.index)}" th:each="post, postStast : ${posts}">
<div class="post_item" th:onclick="goToEditor([[${path}]],[[${post.id}]],[[${SK}]])" >
<span id="postTitle" class="post_attr" th:text="${post.title}"></span>
<div id="content" class="post_attr content" th:attr="data=${post.content}"></div>
<span id="writeDate" class="post_attr" th:text="${#dates.format(post.writeTime, 'yyyy.MM.dd HH:mm:ss')}"></span>
<span id="postId" class="post_attr" th:text="${post.id}"></span>
</div>
</th:block>
</th:block>
<div class="post_layer" id="posts" th:each="posts, postsStat : ${chunkedPosts}">
<div class="post_layer" th:class="${#strings.append(rowKey, postsStat.index)}" th:each="post, postStat : ${posts}">
<div class="post_item"
th:if="${post.id != null and post.id != ''}"
onclick="goToEditor(this)"
th:attr="data-post-id=${post.id}">
<span id="postTitle" class="post_attr" th:text="${post.title}"></span>
<div id="content" class="post_attr content" th:attr="data=${post.content}"></div>
<span id="writeDate" class="post_attr" th:text="${#dates.format(post.writeTime, 'yyyy.MM.dd HH:mm:ss')}"></span>
<span id="postId" class="post_attr" th:text="${post.id}"></span>
</div>
</div>
</div>
</th:block>
</div>
@@ -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">
@@ -21,52 +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>
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';
}
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: [
[{ font: Font.whitelist }], // 폰트 목록 드롭다운 추가
[{ 'size': ['small', false, 'large', 'huge'] }], // 폰트 크기
['bold', 'italic', 'underline', 'strike'], // 글자 굵기, 기울임, 밑줄, 취소선
[{ 'color': [] }, { 'background': [] }], // 글자 색, 배경색
[{ 'header': 1 }, { 'header': 2 }, 'blockquote', 'code-block'], // 제목1,2, 인용, 코드 블록
[{ 'script': 'sub'}, { 'script': 'super' }], // 위첨자, 아래첨자
[{ 'list': 'ordered'}, { 'list': 'bullet' }], // 번호 있는 목록, 점 목록
[{ 'indent': '-1'}, { 'indent': '+1' }], // 들여쓰기 증가/감소
['link', 'image', 'video'],
['table-better'],// 링크, 이미지, 비디오
[{ 'direction': 'rtl' }], // 텍스트 방향 (오른쪽 → 왼쪽)
[{ 'align': [] }], // 정렬 옵션
['clean']
],
'table-better': {
language: 'en_US',
toolbarTable: true
},
keyboard: {
bindings: QuillTableBetter.keyboardBindings
}
}
});
});
</script>
<script>document.addEventListener('DOMContentLoaded', function() {initEditor(true)});</script>
</th:block>
<th:block layout:fragment="content" id="content">
<div id="main_layer">
@@ -7,9 +7,6 @@
<th:block layout:fragment="head">
<script type="text/javascript" th:src="@{/js/blog.js}"></script>
<link th:href="@{/css/blog.css}" rel="stylesheet" />
<script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
<script type="text/javascript" th:src="@{/js/test.js}"></script>
<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
<script th:inline="javascript">
</script>
@@ -7,9 +7,6 @@
<th:block layout:fragment="head">
<script type="text/javascript" th:src="@{/js/blog.js}"></script>
<link th:href="@{/css/blog.css}" rel="stylesheet" />
<script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
<script type="text/javascript" th:src="@{/js/test.js}"></script>
<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
<script th:inline="javascript">
document.addEventListener("DOMContentLoaded", onLoaded);
</script>
@@ -7,9 +7,6 @@
<th:block layout:fragment="head">
<script type="text/javascript" th:src="@{/js/blog.js}"></script>
<link th:href="@{/css/blog.css}" rel="stylesheet" />
<script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
<script type="text/javascript" th:src="@{/js/test.js}"></script>
<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
<script th:inline="javascript">
document.addEventListener("DOMContentLoaded", onLoaded);
@@ -7,9 +7,6 @@
<th:block layout:fragment="head">
<script type="text/javascript" th:src="@{/js/blog.js}"></script>
<link th:href="@{/css/blog.css}" rel="stylesheet" />
<script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
<script type="text/javascript" th:src="@{/js/test.js}"></script>
<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
<script th:inline="javascript">
</script>
@@ -7,9 +7,6 @@
<th:block layout:fragment="head">
<script type="text/javascript" th:src="@{/js/blog.js}"></script>
<link th:href="@{/css/blog.css}" rel="stylesheet" />
<script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
<script type="text/javascript" th:src="@{/js/test.js}"></script>
<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
<script th:inline="javascript">
</script>
@@ -2,7 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
layout:decorate="~{layout/default_layout}">
<head>
@@ -19,7 +19,7 @@
<tr><td><input id="user_id" type="text" class="text"></td></tr>
<tr><td>비밀번호</td></tr>
<tr><td><input id="user_pw" type="password" class="text"></td></tr>
<tr><td><input type="submit" value="로그인" class="btn" th:onclick="onclickLogin([[${enc}]],[[${key}]])"></td></tr>
<tr><td><input type="submit" value="로그인" class="btn" onclick="onclickLogin(serverData.enc,serverData.keyword)"></td></tr>
</table>
</div>