Editoren erweitert

This commit is contained in:
Matthias Grief
2024-12-23 15:00:06 +01:00
parent 41346e9fdb
commit f9e4066352
3 changed files with 71 additions and 44 deletions

View File

@@ -34,8 +34,9 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
</head>
<body class="min-h-screen bg-gray-50">
<form id="topicForm" class="space-y-8">
<div class="grid grid-cols-2 gap-8">
<div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
<!-- Left column - Topic details -->
<div class="space-y-6">
<div>
@@ -50,7 +51,8 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
<div>
<label for="topicSubjectSelect" class="block text-sm font-medium text-gray-700">Fach</label>
<select id="topicSubjectSelect" name="subject" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required>
<select id="topicSubjectSelect" name="subject"
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required>
<option value="">Fach auswählen...</option>
<?php
foreach ($allSubjects as $subject) {
@@ -68,7 +70,8 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
</div>
<div>
<label for="topicDescriptionSelect" class="block text-sm font-medium text-gray-700">Kurzbeschreibung</label>
<label for="topicDescriptionSelect"
class="block text-sm font-medium text-gray-700">Kurzbeschreibung</label>
<textarea id="topicDescriptionSelect" name="description" rows="5"
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required><?php
if (isset($editingTopic)) {
@@ -79,24 +82,27 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
<div>
<label for="iconSelect" class="block text-sm font-medium text-gray-700">Icon</label>
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text" name="icon" id="iconSelect" value="<?php
if(isset($editingTopic)){
echo $editingTopic->getIcon();
}
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text" name="icon"
id="iconSelect" value="<?php
if (isset($editingTopic)) {
echo $editingTopic->getIcon();
}
?>">
</div>
<div>
<label for="relatedTopicSelect" class="block text-sm font-medium text-gray-700">Verwandte Themen als IDs und kommagetrennt</label>
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text" name="related-topics" id="relatedTopicSelect" value="<?php
if(isset($editingTopic)) {
echo implode(", ", $editingTopic->getRelatedTopics());
}
<label for="relatedTopicSelect" class="block text-sm font-medium text-gray-700">Verwandte Themen
als IDs und kommagetrennt</label>
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text"
name="related-topics" id="relatedTopicSelect" value="<?php
if (isset($editingTopic)) {
echo implode(", ", $editingTopic->getRelatedTopics());
}
?>">
</div>
</div>
<!-- Right column - Content and preview -->
<!-- Right column - Editor -->
<div>
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
@@ -115,20 +121,23 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
<div id="quillEditor" style="height: 400px;" class="bg-white border rounded-lg">
<?php
if(isset($editingTopic)) {
echo $editingTopic->getFinishedArticle();
}
if (isset($editingTopic)) {
$article = $editingTopic->getFinishedArticle();
$article = str_replace("$$", "<br>$$<br>", $article);
echo $article;
}
?>
</div>
</div>
</div>
</div>
<!-- Preview section -->
<!--
<div class="border rounded-lg p-8 mt-8 bg-gray-50">
<h4 class="text-lg font-medium text-gray-700 mb-4">Vorschau</h4>
<div id="contentPreview" class="prose prose-lg max-w-none bg-white p-6 rounded-lg shadow-sm"></div>
</div>
-->
<div class="flex justify-end gap-4">
<button type="button" onclick="closeModal()"
@@ -160,7 +169,7 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
quill.on('text-change', (delta, oldDelta, source) => {
const html = quill.getSemanticHTML();
document.getElementById('contentPreview').innerHTML = html;
//document.getElementById('contentPreview').innerHTML = html;
document.getElementById('article-upload-field').value = html;
});