lunaticbum 2e7192f91b ...
2024-10-25 18:28:25 +09:00

139 lines
5.8 KiB
HTML

<!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" />-->
<script th:inline="javascript" >
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'))
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:baseData.content,
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>