Mermutef/LMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Learn: inline markdown editor with formatting toolbar; drop edit modals

Browse Source
This commit is contained in:
Vladislav Kopnin
2026-09-17 18:31:43 +03:00
parent 8753d3658e
commit c111dce6da
7 changed files with 210 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
web/src/main/resources/templates/learn/article.html
View File

@@ -46,7 +46,7 @@
</h1>
<div th:if="${currentUser != null and currentUser.admin}" class="flex flex-wrap gap-2 mb-4">
<button class="btn btn-primary btn-sm" type="button" onclick="openModal('modal-edit-article')">Править</button>
<button class="btn btn-primary btn-sm" type="button" onclick="startArticleEdit()">Править</button>
<form class="inline-form" th:action="@{/admin/content/articles/toggle-published}" method="post">
<input type="hidden" name="_csrf" th:value="${csrfToken}">
<input type="hidden" name="id" th:value="${article.id}">
@@ -80,7 +80,30 @@
</a>
</nav>
<div class="card card-body md-body" th:utext="${article.bodyHtml}"></div>
<div id="article-view" class="card card-body md-body" th:utext="${article.bodyHtml}"></div>
<form id="article-edit" class="card card-body form-stack" hidden
th:if="${currentUser != null and currentUser.admin}"
th:action="@{/admin/content/articles/{id}/save(id=${article.id})}" method="post">
<input type="hidden" name="_csrf" th:value="${csrfToken}">
<input type="hidden" name="back" th:value="${back}">
<div><label class="label" for="article-title">Заголовок</label>
<input class="input" id="article-title" name="title" th:value="${article.title}" required></div>
<div>
<label class="label" for="article-body">Текст статьи (markdown)</label>
<div th:replace="~{fragments/md-toolbar :: toolbar('#article-body')}"></div>
<textarea class="input md-editor-body" id="article-body" name="bodyMd" rows="24"
th:text="${article.bodyMd}"></textarea>
<p class="hint">
Кнопки вставляют разметку в текст. Картинки и видео берутся из папки <code class="code">assets/</code>
архива материалов (имена файлов — латиницей). Заголовок статьи — отдельное поле выше.
</p>
</div>
<div class="flex gap-2">
<button class="btn btn-primary" type="submit">Сохранить</button>
<button class="btn btn-secondary" type="button" onclick="cancelArticleEdit()">Отмена</button>
</div>
</form>
<nav class="article-nav mt-6" th:if="${prevArticle != null or nextArticle != null}">
<a th:if="${prevArticle != null}" class="btn btn-secondary"
@@ -97,34 +120,8 @@
</div>
<dialog id="modal-edit-article" class="modal">
<div class="modal-header">
<h2 class="modal-title">Правка статьи</h2>
<button class="modal-close" type="button" onclick="closeModal('modal-edit-article')">✕</button>
</div>
<div class="modal-body">
<form class="form-stack" th:action="@{/admin/content/articles/{id}/save(id=${article.id})}" method="post">
<input type="hidden" name="_csrf" th:value="${csrfToken}">
<input type="hidden" name="back" th:value="${back}">
<div><label class="label" for="artTitle">Заголовок</label>
<input class="input" id="artTitle" name="title" th:value="${article.title}" required></div>
<div><label class="label" for="artBody">Текст (markdown)</label>
<textarea class="input" id="artBody" name="bodyMd" rows="18" th:text="${article.bodyMd}"></textarea></div>
<p class="hint">
Картинка с подписью: <code class="code">:::figure assets/имя.svg | Рис. 1. Подпись</code>.
Видео: <code class="code">:::video assets/имя.mp4 | Подпись</code>.
Решение под спойлером: <code class="code">:::spoiler Решение … :::</code>.
</p>
<button class="btn btn-primary" type="submit">Сохранить</button>
</form>
</div>
</dialog>
<script th:if="${currentUser != null and currentUser.admin}">
if (window.location.search.indexOf('edit=1') >= 0) {
document.addEventListener('DOMContentLoaded', function () { openModal('modal-edit-article'); });
}
</script>
<script src="/js/mdeditor.js" defer></script>
</div>
</body>
</html>