Use of the Markdown text editor in information publishing and information interaction (1). markdown Text Editor

Use of the Markdown text editor in information publishing and information interaction (1). markdown Text Editor

Markdown is a markup language that can be written in a common text editor. It uses HTML-like markup syntax to make the common text content have a certain format.

MarkdownEditor is a browser-based Markdown text editor with simple and practical functions.

Link: http://jbt.github.io/markdown-editor

Address: https://github.com/jbt/markdown-editor

The license for this text editor is described as "you can copy, modify, and use it whenever you like. (Feel free to take the code and copy it and modify it and use it however you like .)"

The use of icons is a feature of this open-source product, as shown in.

The following code block shows the resources referenced in the source code:

  <script src="markdown-it.js"></script>  <script src="markdown-it-footnote.js"></script>  <script src="highlight.pack.js"></script>  <script src="emojify.js"></script>  <script src="codemirror/lib/codemirror.js"></script>  <script src="codemirror/overlay.js"></script>  <script src="codemirror/xml/xml.js"></script>  <script src="codemirror/markdown/markdown.js"></script>  <script src="codemirror/gfm/gfm.js"></script>  <script src="codemirror/javascript/javascript.js"></script>  <script src="codemirror/css/css.js"></script>  <script src="codemirror/htmlmixed/htmlmixed.js"></script>  <script src="codemirror/lib/util/continuelist.js"></script>  <script src="rawinflate.js"></script>  <script src="rawdeflate.js"></script>  <link rel="stylesheet" href="base16-light.css">  <link rel="stylesheet" href="codemirror/lib/codemirror.css">  <link rel="stylesheet" href="default.css">

Note: Change the JavaScript code to the JS folder and the style code to the CSS folder according to your habits. In addition, the emoji directory stores the beautiful icons used for information interaction.

Modify source code target and content target

• Extract the original Markdown text and store it in the background database;
• Extract the HTML document converted by the Markdown text editor and store it in the background database.

Modify content

The source code already contains code similar to the function for exporting/storing documents. You just need to make some changes to the Code.

    function saveAsMarkdown(){      var code = editor.getValue();      var blob = new Blob([code], { type: 'text/plain' });      saveBlob(blob, "untitled.md");    }    function saveAsHtml() {      var code = document.getElementById('out').innerHTML;      var blob = new Blob([code], { type: 'text/plain' });      saveBlob(blob, "untitled.html");    }

Add code

You need to add the convenient image upload function to achieve text-and-image mixing. You can use the shortcut key (Ctrl/Cmd + S) in the source code for processing. See the source code below:

    function showMenu() {      document.getElementById('menu').style.display = 'block';    }    document.addEventListener('keydown', function(e){      if(e.keyCode == 83 && (e.ctrlKey || e.metaKey)){        e.preventDefault();        showMenu();        return false;      }    });

Information Publishing Function Design Interface Design

The information publishing interface is in the upper/lower structure. The above is online display, and the input box below is online editing. If the current wide-screen computer display is common, the left and right structures should be followed.

Function Design

Function Name	Function Description	Remarks
Information Publishing	Publish edited Information	Save Markdown text and HTML text respectively
Upload images	Upload image files to the System	Links in the editor and online images
Edit	The Edit button is provided to facilitate modification.
Exit	Exit the editing status and close the window.

Information Storage

The Markdown original text and converted HTML documents and images involved in the content of information publishing are respectively stored in the Document Database (MongoDB.

Other Extensions support flowcharts and UML time sequence diagrams.

Extended support flow chart and UML Sequence Chart function, in the information release is not practical, only for technical exchange research, need to introduce plug-ins, flow chart using flowchart, Open Source Address: https://github.com/adrai/flowchart.js

Risks and Problems

• The risk is that users need to learn to use the Markdown markup language. Although it is very simple, some people do not want to learn it;
• One problem is that when this open-source package displays the second-level title (#), the translated HTML document has a lower-level line, which must be corrected during use;
• The second problem is that line feed conversion is not supported. line feed must be changed twice in the editor.

Note: You can adjust the title h2 style in the homepage document.

H1 {font-size: 2.5em ;}<! -- Source h2 is --> h2 {font-size: 2em; border-bottom: 1px solid silver; padding-bottom: 5px ;}<! -- Modify h2 to --> h2 {font-size: 2em ;}

Resources

Download and sort resources by myself: http://pan.baidu.com/s/1kthyuun. if the error message is invalid, contact us for feedback.

Postscript

By referencing others, Markdown is a lightweight "Markup Language" that has many advantages and is widely used by more and more writers. Do not be confused by the "mark" or "language". The Markdown syntax is very simple. There are no more than 10 commonly used markup symbols. Compared with the more complex HTML markup language, Markdown is very lightweight and does not require much learning cost, once you are familiar with this syntax rule, it will have a permanent effect.

If you have other open-source and easy-to-use resources and suggestions, please feel free to contact us.