40 lines
1.3 KiB
HTML
40 lines
1.3 KiB
HTML
{% extends "components/base.html" %}
|
|
{% block title %}Create Post{% endblock %}
|
|
|
|
{% block main_area %}
|
|
<h1>Create New Post</h1>
|
|
<div class="row">
|
|
<!-- 왼쪽: 마크다운 에디터 -->
|
|
<div class="col-md-6">
|
|
<form method="POST" id="post-form">
|
|
{% csrf_token %}
|
|
{{ form.as_p }}
|
|
<button type="submit" class="btn btn-primary mt-3">Save</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 오른쪽: 미리보기 -->
|
|
<div class="col-md-6">
|
|
<h2>Preview</h2>
|
|
<div id="preview" class="border p-3" style="background: #f8f9fa; min-height: 300px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 마크다운 파서 및 스크립트 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
|
|
<script>
|
|
// 마크다운 파서 초기화
|
|
const md = window.markdownit();
|
|
|
|
// content 필드와 미리보기 연결
|
|
const textarea = document.getElementById("markdown-editor");
|
|
const preview = document.getElementById("preview");
|
|
|
|
// 실시간 미리보기 업데이트
|
|
textarea.addEventListener("input", function () {
|
|
const markdownContent = textarea.value; // textarea 내용 가져오기
|
|
preview.innerHTML = md.render(markdownContent); // 마크다운 -> HTML 변환
|
|
});
|
|
</script>
|
|
{% endblock %}
|