lkva/NDOJ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

markdown_editor ver2

Browse source
This commit is contained in:
BaoLe106 2023-09-21 01:46:00 +08:00
parent 872424a96f
commit 16da9932e1
1 changed files with 107 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

119
templates/markdown_editor/markdown_editor.html
View file

@ -5,20 +5,38 @@
main {
overflow: hidden;
}
.form-area {
float: left;
width: 47%;
/* height: 604px; */
/* background-color: #acabab; */
/* padding: 20px; */
}
.left-markdown{
float: left;
width: 47%;
height: 620px;
height: 50%;
/* flex: 1; */
/* background-color: #acabab; */
padding: 20px;
}
.right-markdown{
.wmd-preview{
float: right;
width: 47%;
height: 620px;
background-color: #6b6b6b;
margin-top: 0;
}
.width-controller{
width: 51%;
/* flex: 1; */
}
.right-markdown{
/* float: right; */
/* width: 51%; */
height: 427px;
/* flex: 1; */
/* background-color: #6b6b6b; */
overflow-y: scroll;
/* #f0f0f0; */
padding: 20px;
/* padding: 20px; */
}
</style>
{% endblock %}
@ -26,7 +44,7 @@
{% block body %}
<script>
$(document).ready(function(){
$("#inputField").on("keyup", function() {
$("#wmd-input-id_body").on("keyup", function() {
const csrfToken = "{{ csrf_token }}";
$.ajax({
url: "{{url('blog_preview')}}",
@ -49,12 +67,89 @@
});
});
</script>
<div class="left-markdown">
<form id="post-form" method="POST" >
{% csrf_token %}
<textarea id="inputField" cols="105" rows="40" value=" "></textarea>
<!-- <div class="left-markdown">
<form id="post-form" method="POST" >
{% csrf_token %}
<textarea id="inputField" cols="105" rows="40" value=" "></textarea>
</form>
</div> -->
<div id="new-comment" class="form-area" style="">
<form class="comment-submit-form" action="" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="Ngk7TfY2iIW4e9cPitl05k1c7xNUsVk9kCTkrAFveVmmcIhjRKv4GLtItKANAvae"> <input type="hidden" name="parent" id="id_parent">
<div class="comment-post-wrapper">
<div id="comment-form-body"><div class="wmd-wrapper image-upload-enabled">
<div class="wmd-panel">
<div id="wmd-button-bar-id_body"><ul id="wmd-button-row-id_body" class="wmd-button-row">
<li class="wmd-button wmd-bold-button wmd-button-active" id="wmd-bold-button-id_body" title="Strong <strong> Ctrl+B"></li>
<li class="wmd-button wmd-italic-button wmd-button-active" id="wmd-italic-button-id_body" title="Emphasis <em> Ctrl+I"></li>
<li class="wmd-spacer wmd-spacer1" id="wmd-spacer1-id_body"></li>
<li class="wmd-button wmd-latex-button wmd-button-active" id="wmd-latex-button-id_body" title="Latex embed - Ctrl+M"></li>
<li class="wmd-button wmd-latex-button-display wmd-button-active" id="wmd-latex-button-display-id_body" title="Latex display embed - Ctrl+Space"></li>
<li class="wmd-spacer wmd-spacer2" id="wmd-spacer2-id_body"></li>
<li class="wmd-button wmd-link-button wmd-button-active" id="wmd-link-button-id_body" title="Hyperlink <a> Ctrl+L"></li>
<li class="wmd-button wmd-user-reference-button wmd-button-active" id="wmd-user-reference-button-id_body" title="User reference"></li>
<li class="wmd-button wmd-quote-button wmd-button-active" id="wmd-quote-button-id_body" title="Blockquote <blockquote> Ctrl+Q"></li>
<li class="wmd-button wmd-code-button wmd-button-active" id="wmd-code-button-id_body" title="Code Sample <pre><code> Ctrl+K"></li>
<li class="wmd-button wmd-image-button wmd-button-active" id="wmd-image-button-id_body" title="Image <img> Ctrl+G"></li>
<li class="wmd-spacer wmd-spacer3" id="wmd-spacer3-id_body"></li>
<li class="wmd-button wmd-olist-button wmd-button-active" id="wmd-olist-button-id_body" title="Numbered List <ol> Ctrl+O"></li>
<li class="wmd-button wmd-ulist-button wmd-button-active" id="wmd-ulist-button-id_body" title="Bulleted List <ul> Ctrl+U"></li>
<li class="wmd-button wmd-heading-button wmd-button-active" id="wmd-heading-button-id_body" title="Heading <h2>/<h2> Ctrl+H"></li>
<li class="wmd-button wmd-hr-button wmd-button-active" id="wmd-hr-button-id_body" title="Horizontal Rule <hr> Ctrl+R"></li>
<li class="wmd-spacer wmd-spacer3" id="wmd-spacer3-id_body"></li>
<li class="wmd-button wmd-admonition-button wmd-button-active" id="wmd-admonition-button-id_body" title="Admonition"></li>
<li class="wmd-button wmd-spoiler-button wmd-button-active" id="wmd-spoiler-button-id_body" title="Spoiler"></li>
<li class="wmd-spacer wmd-spacer4" id="wmd-spacer4-id_body"></li>
<li class="wmd-button wmd-undo-button wmd-button-active" id="wmd-undo-button-id_body" title="Undo - Ctrl+Z"></li>
<li class="wmd-button wmd-redo-button wmd-button-inactive" id="wmd-redo-button-id_body" title="Redo - Ctrl+Shift+Z"></li></ul></div>
<textarea id="wmd-input-id_body" class=" wmd-input" name="body" required=""></textarea>
</div>
<div id="id_body-preview" data-preview-url="/widgets/preview/comment" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="wmd-panel wmd-preview dmmd-preview dmmd-no-button">
<div class="dmmd-preview-update"><i class="fa fa-refresh"></i> Update Preview</div>
<div class="dmmd-preview-content content-description"></div>
</div>
<div class="pagedown-image-upload">
<h2>Insert Image</h2>
<div class="form-row">
<div>
<label class="label">From the web</label>
<input class="url-input" type="text" placeholder="http://">
</div>
</div>
<div class="form-row">
<div>
<label class="label">From your computer</label>
<input class="file-input" type="file" name="image" id="file" data-action="/pagedown/image-upload/" accept="image/*">
</div>
</div>
<div class="submit-row">
<div class="submit-loading"></div>
<input class="submit-input show" type="submit" value="Save" name="_addanother">
<p class="deletelink-box"><a href="#" class="close-image-upload deletelink">Cancel</a></p>
</div>
</div>
</div></div>
</div>
<hr>
<input style="float:right" type="submit" value="Post!" class="button">
</form>
</div>
<div class="right-markdown" id="display"></div>
<!-- <div id="comments" class="comment-area"></div> -->
<div id="id_body-preview" data-preview-url="/widgets/preview/comment" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="width-controller wmd-panel wmd-preview dmmd-preview dmmd-no-button dmmd-preview-has-content">
<div class="right-markdown dmmd-preview-content content-description" id="display"></div>
</div>
<!-- <script>
var right=document.getElementById("new-comment").style.height;
var left=document.getElementById("id_body-preview").style.height;
document.getElementById('id_body-preview').style.height=right;
</script> -->
{% endblock %}