69 lines
1.7 KiB
HTML
69 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<header>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
|
|
<style>
|
|
#tree {
|
|
min-width: 180px;
|
|
}
|
|
#tree ul {
|
|
padding-inline-start: 1em;
|
|
}
|
|
</style>
|
|
</header>
|
|
<body>
|
|
<div style="width: 100%; margin: auto; max-width: 1024; display: flex; flex-direction: columns;">
|
|
<details>
|
|
<summary style="min-width: 60px;">Tree</summary>
|
|
<div id="tree">
|
|
<ul>
|
|
<li>hi</li>
|
|
<ul><li>subhi</li></ul>
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
<article style="flex-grow: 1;">
|
|
<textarea id="my-text-area"></textarea>
|
|
</article>
|
|
</div>
|
|
</body>
|
|
<footer>
|
|
<script>
|
|
const easyMDE = new EasyMDE({
|
|
autoDownloadFontAwesome: true,
|
|
autofocus: true,
|
|
autosave: {
|
|
enabled: false,
|
|
},
|
|
element: document.getElementById('my-text-area'),
|
|
forceSync: true,
|
|
indentWithTabs: false,
|
|
initialValue: "# initial\nvalue",
|
|
showIcons: ["code", "table"],
|
|
spellChecker: false,
|
|
sideBySideFullscreen: false,
|
|
tabSize: 3,
|
|
previewImagesInEditor: true,
|
|
insertTexts: {
|
|
image: ["![](", ")"],
|
|
link: ["[](", ")"],
|
|
},
|
|
lineNumbers: true,
|
|
uploadImage: true,
|
|
imageUploadEndpoint: "/api/v0/media", // POST wants {data: {filePath: "/..."}}
|
|
imagePathAbsolute: false,
|
|
renderingConfig: {
|
|
codeSyntaxHighlighting: true,
|
|
},
|
|
})
|
|
function logValue() {
|
|
console.log(easyMDE.value())
|
|
}
|
|
logValue()
|
|
</script>
|
|
</footer>
|
|
</html>
|