32 lines
1.2 KiB
Twig
32 lines
1.2 KiB
Twig
<div class="container mx-auto">
|
|
<div class="flex">
|
|
<div class="w-1/2">
|
|
<h3 class="text-2xl font-bold">Page Content</h3>
|
|
<form action="{{ AntCMSActionURL }}" 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">{{ AntCMSTextAreaContent }}</textarea>
|
|
<input type="submit" value="Save" class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded-lg">
|
|
</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--[\s\S]*?--AntCMS--/gm, "");
|
|
output.innerHTML = marked.parse(inputValue);
|
|
}
|
|
|
|
parseMarkdown();
|
|
|
|
input.addEventListener("input", parseMarkdown);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|