65 lines
2.5 KiB
HTML
65 lines
2.5 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}"
|
||
|
|
>
|
||
|
|
<head>
|
||
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
|
||
|
|
<script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
|
||
|
|
<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">
|
||
|
|
let editor
|
||
|
|
let onChange = () => {console.log(editor.getMarkdown())}
|
||
|
|
document.addEventListener("DOMContentLoaded", onLoaded);
|
||
|
|
function onLoaded() {
|
||
|
|
var h = document.querySelector('#content').getBoundingClientRect().height + 'px'
|
||
|
|
editor = new toastui.Editor({
|
||
|
|
el: document.querySelector('#editor'),
|
||
|
|
height: '500px',
|
||
|
|
width:'100%',
|
||
|
|
viewer: true,
|
||
|
|
usageStatistics : false,
|
||
|
|
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",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function save() {
|
||
|
|
console.log(editor.getHTML())
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<div layout:fragment="content" id="content">
|
||
|
|
<input id="title_layer" />
|
||
|
|
<div id="editor" ></div>
|
||
|
|
<div id="hashtag_layer">
|
||
|
|
<select > </select>
|
||
|
|
<input id="hashtag" />
|
||
|
|
</div>
|
||
|
|
<div id="controll_layer" >
|
||
|
|
<button onclick="save()">asdsad</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</html>
|