butler_ddochi/blog/templates/blog/update_post.html

{% extends "components/base.html" %}
{% block title %}Update Post{% endblock %}

{% block main_area %}
  <h1 class="pt-3">Update Post</h1>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <form method="POST" id="post-form">
          {% csrf_token %}
          <div class="mb-3">
            {{ form.title.label_tag }}
            {{ form.title }}
          </div>
          <div class="mb-3">
            {{ form.summary.label_tag }}
            {{ form.summary }}
          </div>
          <div class="mb-3">
            {{ form.tags.label_tag }}
            {{ form.tags }}
          </div>

          <!-- 마크다운 에디터 -->
          <h2>Contents</h2>
          <div class="col-md-12">
            {{ form.contents }}
          </div>
          <!-- 버튼 -->
          <div class="d-flex justify-content-end mt-4">
            <button type="submit" class="btn btn-primary me-2">Save Changes</button>
            <a href="{% url 'blog:post_list' %}" class="btn btn-secondary">Cancel</a>
          </div>
        </form>
      </div>
      <div class="col-md-6">
        <div id="preview" class="border p-3 bg-light h-100 overflow-auto"></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>
  </div>
{% endblock %}