Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

Note the need to introduce the Markdown editor when creating wiki documentation

Markdown editor introduced to Django

1. Textarea input box –> Markdown editor

  • First, I’m using the Form generated here, and the MarkDown editor is essentially replacing the TextArea generated by the Form
  • Models are as follows: 
    content = models.TextField(verbose_name='content')
Copy the code
  • In the front page, it is generated using a for loop, with the following code 
    {% for field in form %}
	<div class="form-group">
		<label for="{{ field.id_for_label }}">{{ field.label }}</label>
		{{ field }}
		<span class="error-msg">{{ field.errors.0 }}</span>
	</div>
{% endfor %}
Copy the code
  • And since we’re going to make a substitution, let’s just check if in the loop, ifname='content'Let’s put another one on itdivAnd add an attribute to itid="editor". The modified code is as follows: 
    {% for field in form %}
	{% if field.name == 'content' %}
		<div class="form-group">
			<label for="{{ field.id_for_label }}">{{ field.label }}</label>
			<div id="editor">
				{{ field }}
			</div>
			<span class="error-msg">{{ field.errors.0 }}</span>
		</div>
	{% else %}
		<div class="form-group">
			<label for="{{ field.id_for_label }}">{{ field.label }}</label>
			{{ field }}
			<span class="error-msg">{{ field.errors.0 }}</span>
		</div>
	{% endif %}
{% endfor %}
Copy the code
  • Looking in the browser, we can also see content withid="editor"

  • For the Markdown editor, I’m usingmdeditor
    • The github address is editor.md
    • We’ll download it locally

    Download slower words, HERE I put the file network disk link in the end, need to be able to download.

  • Once downloaded, place it under the static folder of your project. After the import, you can see some offline examples in examples

2. Use of editor-MD

  • To use the MD editor, you need to import its CSS and JS from a static file

    <link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">

<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
Copy the code

  • Initialize the MD editor in the JS script

    $(function () {
	initEditorMd();
});


function initEditorMd() {
	// The first argument is the position in the page (in my case id="editor")
	// The second argument is the configuration after generating the MD editor
    editormd('editor', {
        placeholder: "Please enter the content".height: 500})},Copy the code

  • When we import the file and initialize it, we open the page and find that the MD editor keeps loading in circles

Then we look at the record in the background, there are many dependent files failed to loadNot Found: /manage/4/wiki/add/lib/codemirror/codemirror.min.css [16/Jul/2020 18:00:55] "GET / manage / 4 / wiki/add/lib/codemirror/codemirror. Min. CSS HTTP / 1.1 "404 6691 Not Found: /manage/4/wiki/add/lib/codemirror/addon/search/matchesonscrollbar.css [16/Jul/2020 18:00:55] "GET / manage / 4 / wiki/add/lib/codemirror addon/search/matchesonscrollbar CSS HTTP / 1.1 "404 6742 Not Found: /manage/4/wiki/add/lib/codemirror/addon/dialog/dialog.css [16/Jul/2020 18:00:55] "GET / manage / 4 / wiki/add/lib/codemirror/addon/dialog/dialog. The CSS HTTP / 1.1 "404 6706 Not Found: /manage/4/wiki/add/lib/codemirror/codemirror.min.jsBased on the error message, we checkeditor-md/libIf markdown does not find any dependent components, the editor will report this error because we did not specify the location of the lib fileWe’ll just specify the path to lib in pathJs editormd(' plugin ', {placeholder: "placeholder ", height: 500, path: "{% static 'plugin/editor-md/lib/' %}"})Looking at the page again, we can see that the Markdown editor loads.

  • Finally, there is a small problem, when I display md in full screen, I may encounter the following problem, due to the CSS style layering (Z-index), we just need to change the MD editorz-indexAnd make it bigger than all when it’s full screenz-indexCan. (z-indexDefault is 1000)

html .editormd-fullscreen { z-index: 1001; } In this way, md can be written in full screen.

3. Preview Markdown

  • After the above steps, you are ready to display markDown on the page, and then implement the MarkDown preview.
  • Again, the front page I puts the content indivIn the 
    <div id="previewMarkdown">
	<textarea>{{ wiki_object.content }}</textarea>
</div>
Copy the code
  • Then introduce CSS and JS 
    <link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.preview.min.css' %}">

<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/marked.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/prettify.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/raphael.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/underscore.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/sequence-diagram.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/flowchart.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/jquery.flowchart.min.js' %}"></script>
Copy the code
  • Finally, write the JS initialization function 
    $(function () {
	initPreviewMarkdown();
});

function initPreviewMarkdown() {
	editormd.markdownToHTML("previewMarkdown", {
		// Content filtering to prevent XSS attacks, etc
		htmlDecode: "style, script, iframe"
	});
}
Copy the code

The link editor – md: pan.baidu.com/s/1CL4EwtP9…

Extraction code: OXD1

Finally, welcome to pay attention to my personal wechat public account “Little Ape Ruochen”, get more IT technology, dry goods knowledge, hot news