86 lines
3.9 KiB
HTML
86 lines
3.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||
|
|
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">
|
||
|
|
<!-- TOAST UI Editor CDN(JS) -->
|
||
|
|
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>-->
|
||
|
|
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
|
||
|
|
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
|
||
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
|
||
|
|
<script type="text/javascript" src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
|
||
|
|
<!-- TOAST UI Editor CDN(CSS) -->
|
||
|
|
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
|
||
|
|
<title>Spring Boot</title>
|
||
|
|
<script th:inline="javascript">
|
||
|
|
|
||
|
|
function onLoaded() {
|
||
|
|
// const onChange = () => {
|
||
|
|
// const editorHtml = editor.getHTML();
|
||
|
|
// setHtml(editorHtml);
|
||
|
|
// };
|
||
|
|
const editor = new toastui.Editor({
|
||
|
|
el: document.querySelector('#editor'),
|
||
|
|
previewStyle: 'vertical',
|
||
|
|
height: '500px',
|
||
|
|
usageStatistics : false,
|
||
|
|
initialValue: "",
|
||
|
|
// events : {
|
||
|
|
// change : this.onChange
|
||
|
|
// },
|
||
|
|
hooks: {
|
||
|
|
addImageBlobHook: (blob, callback) => {
|
||
|
|
// blob : Java Script 파일 객체
|
||
|
|
//console.log(blob);
|
||
|
|
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append('file', blob);
|
||
|
|
|
||
|
|
let url = '/files/';
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
enctype: 'multipart/form-data',
|
||
|
|
url: 'blog/post/imageUpload',
|
||
|
|
data: formData,
|
||
|
|
dataType: 'json',
|
||
|
|
processData: false,
|
||
|
|
contentType: false,
|
||
|
|
cache: false,
|
||
|
|
timeout: 600000,
|
||
|
|
success: function (data) {
|
||
|
|
//console.log('ajax 이미지 업로드 성공');
|
||
|
|
url += data.fileName;
|
||
|
|
fileIds += data.id + ",";
|
||
|
|
// callback : 에디터(마크다운 편집기)에 표시할 텍스트, 뷰어에는 imageUrl 주소에 저장된 사진으로 나옴
|
||
|
|
// 형식 : 
|
||
|
|
callback(url, '사진 대체 텍스트 입력');
|
||
|
|
},
|
||
|
|
error: function (e) {
|
||
|
|
//console.log('ajax 이미지 업로드 실패');
|
||
|
|
//console.log(e.abort([statusText]));
|
||
|
|
|
||
|
|
callback('image_load_fail', '사진 대체 텍스트 입력');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<link th:href="@{/css/common.css}" rel="stylesheet" />
|
||
|
|
<script type="text/javascript" th:src="@{/js/common.js}"></script>
|
||
|
|
<script type="text/javascript" th:src="@{/js/user.js}"></script>
|
||
|
|
</th:block>
|
||
|
|
<body onload="onLoaded()">
|
||
|
|
<th:block layout:fragment="header" th:include="@{/fragments/header}"></th:block>
|
||
|
|
<div layout:fragment='content' class='content' id='content'>
|
||
|
|
<div id="editor">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<th:block layout:fragment="footer" th:include="@{/fragments/footer}"></th:block>
|
||
|
|
</body>
|
||
|
|
</html>
|