52 lines
1.7 KiB
PHP
52 lines
1.7 KiB
PHP
<?php
|
|
?>
|
|
|
|
<head>
|
|
<script src="js/tp_md_editor.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
tp_md_editor.init({
|
|
groups: [
|
|
['h1', 'h2', 'h3'],
|
|
['bold', 'italic', 'quote'],
|
|
['link', 'code'],
|
|
['bullet', 'number', 'task'],
|
|
['hr', 'table']
|
|
]
|
|
});
|
|
});
|
|
</script>
|
|
<!-- font awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
|
|
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
<style>
|
|
html { font-family: sans-serif; }
|
|
tp-md-editor { width: 50%; display: block; padding: .2em; }
|
|
tp-md-toolbar, tp-md-toolbar-group { display: flex; gap: .5em; }
|
|
tp-md-toolbar-group:not(:last-child) { border-right:1px solid #ccc; padding-right: .5em; }
|
|
tp-md-toolbar-button { width: 32px; height: 32px; align-content:center;}
|
|
tp-md-toolbar-button { display:inline-block; text-align:center; border: none; cursor: pointer; }
|
|
tp-md-toolbar-button:hover { color:royalblue; }
|
|
tp-md-editor textarea { border: 1px solid #ccc; padding: 1em; margin-top: 1em; width: 100%; }
|
|
tp-md-editor textarea:focus-visible { outline: 0; }
|
|
|
|
.fa-stack-100 { width: 2em; line-height: 2em; }
|
|
.fa-stack-offset { right: 10%; position: absolute; bottom: 15%; font-size: .5em; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>MD Testing</h1>
|
|
<tp-md-editor name="description">
|
|
1. MD CONTENT
|
|
2. list item two
|
|
|
|
and something else
|
|
|
|
- and then
|
|
- and then
|
|
- and then
|
|
</tp-md-editor>
|
|
</body>
|