+ real time markdown preview
Also created admin plugin templates for the Bootstrap theme
This commit is contained in:
parent
6fe8dd90cd
commit
7739b2875d
4 changed files with 68 additions and 1 deletions
|
@ -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();
|
||||
|
||||
|
|
31
src/Themes/Bootstrap/Templates/markdown_edit_layout.html
Normal file
31
src/Themes/Bootstrap/Templates/markdown_edit_layout.html
Normal 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>
|
5
src/Themes/Bootstrap/Templates/textarea_edit_layout.html
Normal file
5
src/Themes/Bootstrap/Templates/textarea_edit_layout.html
Normal 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>
|
31
src/Themes/Default/Templates/markdown_edit_layout.html
Normal file
31
src/Themes/Default/Templates/markdown_edit_layout.html
Normal 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>
|
Loading…
Reference in a new issue