...
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user