+ real time markdown preview

Also created admin plugin templates for the Bootstrap theme
This commit is contained in:
Belle Aerni 2023-01-08 15:38:25 -08:00
parent 6fe8dd90cd
commit 7739b2875d
4 changed files with 68 additions and 1 deletions

View file

@ -101,7 +101,7 @@ class AdminPlugin extends AntPlugin
{
$antCMS = new AntCMS;
$pageTemplate = $antCMS->getPageLayout();
$HTMLTemplate = $antCMS->getThemeTemplate('textarea_edit_layout');
$HTMLTemplate = $antCMS->getThemeTemplate('markdown_edit_layout');
$pages = AntPages::getPages();
$currentConfig = AntConfig::currentConfig();

View file

@ -0,0 +1,31 @@
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Page Content</h3>
<form action="<!--AntCMS-ActionURL-->" method="post">
<textarea id="markdown-input" name="textarea" rows="100" style="width: 100%; height: 100%;"
class="form-control"><!--AntCMS-TextAreaContent--></textarea>
<input type="submit" value="Save">
</form>
</div>
<div class="col-md-6">
<h3>Page Preview</h3>
<div id="markdown-output"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
const input = document.getElementById("markdown-input");
const output = document.getElementById("markdown-output");
function parseMarkdown() {
const inputValue = input.value.replace(/--AntCMS--.*--AntCMS--/s, "");
output.innerHTML = marked.parse(inputValue);
}
parseMarkdown();
input.addEventListener("input", parseMarkdown);
</script>
</div>
</div>
</div>

View file

@ -0,0 +1,5 @@
<form action="<!--AntCMS-ActionURL-->" method="post">
<textarea name="textarea" rows="25" cols="75" type="text" <textarea id="markdown-input" name="textarea" rows="100"
style="width: 100%; height: 100%;" class="form-control"><!--AntCMS-TextAreaContent--></textarea>
<input type="submit" value="Save">
</form>

View file

@ -0,0 +1,31 @@
<div class="container mx-auto">
<div class="flex">
<div class="w-1/2">
<h3 class="text-2xl font-bold">Page Content</h3>
<form action="<!--AntCMS-ActionURL-->" method="post">
<textarea id="markdown-input" name="textarea" rows="100" style="width: 100%; height: 100%;"
class="form-textarea p-3 border-gray-200 bg-gray-100 dark:bg-zinc-900 dark:border-gray-700"><!--AntCMS-TextAreaContent--></textarea>
<input type="submit" value="Save">
</form>
</div>
<div class="w-1/2">
<h3 class="text-2xl font-bold">Page Preview</h3>
<div id="markdown-output"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
const input = document.getElementById("markdown-input");
const output = document.getElementById("markdown-output");
function parseMarkdown() {
const inputValue = input.value.replace(/--AntCMS--.*--AntCMS--/s, "");
output.innerHTML = marked.parse(inputValue);
}
parseMarkdown();
input.addEventListener("input", parseMarkdown);
</script>
</div>
</div>
</div>