lun_admin/lunBackServer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

....

Browse Source
This commit is contained in:
lunaticbum
2024-10-08 14:43:49 +09:00
parent c5de7a3548
commit 9e4597890b
3 changed files with 97 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/content/blog/write.html
+45 -24
View File
@@ -5,6 +5,8 @@
layout:decorate="~{layout/default_layout}">
<th:block layout:fragment="head">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 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>-->
@@ -13,32 +15,50 @@
<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" />
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-dark.css" />
<title>Spring Boot</title>
<script th:inline="javascript">
let editor
function onLoaded() {
// const onChange = () => {
// const editorHtml = editor.getHTML();
// setHtml(editorHtml);
// };
const editor = new toastui.Editor({
var h = document.querySelector('#content').getBoundingClientRect().height + 'px'
editor = new toastui.Editor({
el: document.querySelector('#editor'),
previewStyle: 'vertical',
previewStyle: 'tab',
height: '500px',
width:'100%',
theme:'dark',
usageStatistics : false,
initialValue: "",
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" +
"```"
,
initialEditType:"wysiwyg",
// 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/';
let url = 'blog/post/images/';
$.ajax({
type: 'POST',
enctype: 'multipart/form-data',
@@ -50,17 +70,10 @@
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', '사진 대체 텍스트 입력');
}
});
@@ -68,6 +81,9 @@
}
});
}
function save() {
console.log(editor.getMarkdown())
}
</script>
<link th:href="@{/css/common.css}" rel="stylesheet" />
<script type="text/javascript" th:src="@{/js/common.js}"></script>
@@ -75,12 +91,17 @@
</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 layout:fragment='content' class='content' id='content' style="padding: 10px">
<input id="title_layer" style="width:100%; height:50px; font-size:30px; border-width: 1px; align-content: center; margin: 10px"/>
<div id="editor" style="width:90%; font-size:15px; border-width: 0px; align-content: center"></div>
<div id="hashtag_layer">
<select style="width:40%; height:30px; font-size:15px; border-width: 0px"> </select>
<input id="hashtag" style="width:40%; height:30px; font-size:15px; border-width: 0px"/>
</div>
<div id="controll_layer" style="width: 100%">
<button onclick="save()">asdsad</button>
</div>
</div>
<th:block layout:fragment="footer" th:include="@{/fragments/footer}"></th:block>
</body>
</html>