2024-10-23 17:06:27 +09:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html
|
|
|
|
|
xmlns:th="http://www.thymeleaf.org"
|
|
|
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
|
|
|
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" />-->
|
2024-10-24 18:04:29 +09:00
|
|
|
<script th:inline="javascript" >
|
|
|
|
|
|
2024-10-23 17:06:27 +09:00
|
|
|
var editor
|
|
|
|
|
document.addEventListener("DOMContentLoaded", onLoaded);
|
|
|
|
|
function onLoaded() {
|
2024-10-24 18:04:29 +09:00
|
|
|
baseData.id = [[${srcPost.id}]];
|
|
|
|
|
baseData.title = [[${srcPost.title}]];
|
|
|
|
|
baseData.content = [[${srcPost.content}]];
|
|
|
|
|
baseData.firstPostLat = [[${srcPost.firstPostLat}]];
|
|
|
|
|
baseData.firstPostLon = [[${srcPost.firstPostLon}]];
|
|
|
|
|
baseData.writeTime = [[${srcPost.writeTime}]];
|
2024-10-23 17:06:27 +09:00
|
|
|
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'))
|
|
|
|
|
var editorHeght = (
|
|
|
|
|
document.querySelector('#main_layer').getBoundingClientRect().height -
|
|
|
|
|
(
|
|
|
|
|
Number(style.getPropertyValue('--ButtonHegit').replace("px","") * 3)
|
|
|
|
|
+ Number(style.getPropertyValue('--TopHeight').replace("px",""))
|
|
|
|
|
)
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
editor = new toastui.Editor({
|
|
|
|
|
el: document.querySelector('#editor'),
|
|
|
|
|
previewStyle: 'tab',
|
|
|
|
|
height: editorHeght + 'px',
|
|
|
|
|
width:'95%',
|
|
|
|
|
theme:'dark',
|
|
|
|
|
usageStatistics : false,
|
|
|
|
|
toolbar:null,
|
|
|
|
|
initialValue:
|
|
|
|
|
"# 제목 " +"\n" +
|
|
|
|
|
"평문 사이에 **볼드체** *이탤릭체*"+"\n" +
|
|
|
|
|
"~~어디쓰지~~"+"\n" +
|
|
|
|
|
"***"+"\n" +
|
|
|
|
|
"### 모라모라 " +"\n" +
|
|
|
|
|
"> 으흐흠..." +"\n" +
|
|
|
|
|
"* 쓸까?" +"\n" +
|
|
|
|
|
"1. 첫번째" +"\n" +
|
|
|
|
|
"* [x] 체크하자" +"\n" +
|
|
|
|
|
"* [ ] 체크하자" +"\n" +
|
|
|
|
|
" \|dd\|cc\|ff\|\n" +
|
|
|
|
|
" \|\-\-\-\|\-\-\-\|\-\-\-\|\n" +
|
|
|
|
|
" \|aa\|s\|s\|" +"\n" +
|
|
|
|
|
"[링크다](https://youtube.com)" +"\n" +
|
|
|
|
|
"`var test = 'real test'`" +"\n" +
|
|
|
|
|
"```\n" +
|
|
|
|
|
"let test= = 'real test'\n" +
|
|
|
|
|
"```"
|
|
|
|
|
,
|
|
|
|
|
theme:"dark",
|
|
|
|
|
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>
|
|
|
|
|
</th:block>
|
|
|
|
|
<th:block layout:fragment="content" id="content">
|
|
|
|
|
<div id="main_layer">
|
|
|
|
|
<th:block th:if="${PERMISSION != 'OK'}">
|
|
|
|
|
<h1>권한이 없는 뎁쇼?!</h1>
|
|
|
|
|
</th:block>
|
|
|
|
|
<th:block th:if="${PERMISSION == 'OK'}">
|
|
|
|
|
<div class="layer">
|
|
|
|
|
<input id="title_field" />
|
|
|
|
|
</div>
|
|
|
|
|
<div id="editor" ></div>
|
|
|
|
|
<div class="write_controllbox">
|
|
|
|
|
|
|
|
|
|
<div class="write_option btn-example" to="#popLayer1" onclick="openPopup(this)" ></div>
|
|
|
|
|
<div class="write_option btn-example" to="#popLayer2" onclick="openPopup(this)" id="hashtag_field"></div>
|
|
|
|
|
<label for="location_field"></label><input class="write_option" readonly id="location_field"/>
|
|
|
|
|
</div>
|
|
|
|
|
<h1><button id="save" class="write_option" style="width: 100%; position: relative" onclick="save()">저장하셈</button></h1>
|
|
|
|
|
</th:block>
|
|
|
|
|
</div>
|
|
|
|
|
</th:block>
|
|
|
|
|
<th:block layout:fragment="popup_layer">
|
|
|
|
|
<div id="popLayer1" class="pop_layer">
|
|
|
|
|
<div class="pop_container">
|
|
|
|
|
<div class="pop_conts">
|
|
|
|
|
<!--content //-->
|
|
|
|
|
<p class="ctxt mb20">Thank you.<br>
|
|
|
|
|
Your registration was submitted successfully.<br>
|
|
|
|
|
Selected invitees will be notified by e-mail on JANUARY 24th.<br><br>
|
|
|
|
|
Hope to see you soon!
|
|
|
|
|
</p>
|
|
|
|
|
<div class="btn_r">
|
|
|
|
|
<a href="#" class="btn_layerClose">Close</a>
|
|
|
|
|
</div>
|
|
|
|
|
<!--// content-->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="popLayer2" class="pop_layer">
|
|
|
|
|
<div class="pop_container">
|
|
|
|
|
<div class="pop_conts">
|
|
|
|
|
<!--content //-->
|
|
|
|
|
<p class="ctxt mb20">
|
|
|
|
|
test 002
|
|
|
|
|
</p>
|
|
|
|
|
<div class="btn_r">
|
|
|
|
|
<a href="#" class="btn_layerClose">Close</a>
|
|
|
|
|
</div>
|
|
|
|
|
<!--// content-->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</th:block>
|
|
|
|
|
|
|
|
|
|
</html>
|
