{% extends "base.html" %}

{% block styles %}
  <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
{% endblock %}

{% block content %}
<form id="editor_form">

 <h1><input name='title' type='text' value="{{ page.title }}"></h1>
{% include "breadcrumbs.html" %}

<div id='page_body'></div>

</form>
{% endblock %}



{% block scripts %}
  <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
  <script>

    const editor = new toastui.Editor({
        el: document.querySelector('#page_body'),
        initialEditType: 'wysiwyg',
        initialValue: document.getElementById("data_form__body").value,
        previewStyle: 'tab',
        usageStatistics: false
    });
    editor.getMarkdown();
    console.log(editor);
  </script>
{% endblock %}