...
This commit is contained in:
lunaticbum
@@ -0,0 +1,152 @@
|
||||
<!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 currentTitle = [[${defaultTitle}]]
|
||||
var editor
|
||||
let onChange = () => {console.log(editor.getMarkdown())}
|
||||
document.addEventListener("DOMContentLoaded", onLoaded);
|
||||
function onLoaded() {
|
||||
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>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!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">
|
||||
|
||||
</th:block>
|
||||
<th:block layout:fragment="content" id="content">
|
||||
<table id="main_layer">
|
||||
<tr id="where" th:each="location : ${locations}">
|
||||
<tr id="posts" th:each="post : ${posts}">
|
||||
<td class="post_item"><span th:text="${#dates.format(post.writeTime, 'dd/MMM/yyyy HH:mm')}"></span></td>
|
||||
<td class="post_item"><span th:text="${post.title}"></span></td>
|
||||
<td class="post_item"><span th:text="${post.id}"></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</th:block>
|
||||
</html>
|
||||
@@ -5,7 +5,6 @@
|
||||
layout:decorate="~{layout/default_layout}"
|
||||
>
|
||||
<th:block layout:fragment="head" id="head">
|
||||
<script type="text/javascript" th:src="@{https://code.jquery.com/jquery-3.5.1.min.js}" crossorigin="anonymous"></script>
|
||||
<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" />
|
||||
@@ -17,6 +16,14 @@
|
||||
let onChange = () => {console.log(editor.getMarkdown())}
|
||||
document.addEventListener("DOMContentLoaded", onLoaded);
|
||||
function onLoaded() {
|
||||
var currentTitle = [[${defaultTitle}]]
|
||||
getLocation()
|
||||
var titleField = document.getElementById('title_field')
|
||||
titleField.addEventListener("change", (event) => {
|
||||
baseData.title = titleField.value
|
||||
console.log(baseData.title)
|
||||
});
|
||||
titleField.value = currentTitle
|
||||
var style = getComputedStyle(document.body)
|
||||
console.log(style.getPropertyValue('--ContentVerticalMargin'))
|
||||
console.log(window.c)
|
||||
@@ -64,8 +71,8 @@
|
||||
addImageBlobHook: (blob, callback) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', blob);
|
||||
let uploadUrl = location.protocol + "//" + location.hostname + "/blog/post/imageUpload";
|
||||
let imageUrl = location.protocol + "//" + location.hostname + '/blog/post/images/';
|
||||
let uploadUrl = getMainPath() + "/blog/post/imageUpload";
|
||||
let imageUrl = getMainPath() + '/blog/post/images/';
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
enctype: 'multipart/form-data',
|
||||
@@ -102,15 +109,50 @@
|
||||
</th:block>
|
||||
<th:block th:if="${PERMISSION == 'OK'}">
|
||||
<div class="layer">
|
||||
<input id="title_field" />
|
||||
<input id="title_field" class="write_option" />
|
||||
</div>
|
||||
<div id="editor" ></div>
|
||||
<div class="layer">
|
||||
<select > </select>
|
||||
<input id="hashtag_field" />
|
||||
<button id="save" onclick="save()">asdsad</button>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user