editormd generates blog editing pages

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>write an article</title>

    <link rel="stylesheet" href="https://amazeui.clouddeep.cn/css/amazeui.min.css"/>
<!--    <link rel="stylesheet" href="https://amazeui.clouddeep.cn/css/admin.css">-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">


    <script src="http://editor.md.ipandao.com/examples/js/jquery.min.js"></script>
    <link rel="stylesheet" href="http://editor.md.ipandao.com/lib/codemirror/codemirror.min.css" />
    <link rel="stylesheet" href="http://editor.md.ipandao.com/lib/codemirror/addon/dialog/dialog.css" />
    <link rel="stylesheet" href="http://editor.md.ipandao.com/lib/codemirror/addon/search/matchesonscrollbar.css" />
    <script src="http://editor.md.ipandao.com/lib/codemirror/codemirror.min.js"></script>
    <!-- Or, You can also one by one load CodeMirror modes & addons. -->
    <script src="http://editor.md.ipandao.com/lib/codemirror/addons.min.js"></script>
    <script src="http://editor.md.ipandao.com/lib/codemirror/modes.min.js"></script>
    <script src="http://editor.md.ipandao.com/lib/marked.min.js"></script>
    <!-- if setting previewCodeHighlight == true -->
    <script src="http://editor.md.ipandao.com/lib/prettify.min.js"></script>
    <!-- if setting flowchart == true, or sequence-diagram == true -->
    <script src="http://editor.md.ipandao.com/lib/raphael.min.js"></script>
    <script src="http://editor.md.ipandao.com/lib/underscore.min.js"></script>
    <script src="http://editor.md.ipandao.com/lib/sequence-diagram.min.js"></script>
    <script src="http://editor.md.ipandao.com/lib/flowchart.min.js"></script>
    <script src="http://editor.md.ipandao.com/lib/jquery.flowchart.min.js"></script>
    <!-- if setting tex == true -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.js"></script>
    <link rel="stylesheet" href="http://editor.md.ipandao.com/css/editormd.css" />
    <script src="http://editor.md.ipandao.com/editormd.js"></script>
</head>
<body>
    <!--Introducing common head-->
    <header class="am-topbar admin-header">
        <div class="header">
            <div class="am-topbar" style="margin-bottom: 0">
    
                <h1 class="am-topbar-brand">
                    <a class="blogTitleName" href="/"><img class="imgStyle" src="" />Heaven and earth are free and unfettered</a>
                </h1>
    
                <!--Mobile phone adapter navigation display button-->
                <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}" style="background-color: #CCCCCC; border-color: white; border-radius: 6px "> < span class=" am-sr-only "> navigation switch </span> < span class=" am-icon-bars "> </span> </button>
    
                <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
    
                    <ul class="am-nav am-nav-pills am-topbar-nav">
                        <li><a class="top_bar" href="/" style="cursor: pointer;"><span class="am-icon-home"></span>&nbsp;home page</a></li>
                        <li><a class="top_bar" href="/categories" style="cursor: pointer;"><span class="am-icon-th"></span>&nbsp;classification</a></li>
                        <li><a class="top_bar" href="/archives" style="cursor: pointer;"><span class="am-icon-archive"></span>&nbsp;File</a></li>
                        <li><a class="top_bar" href="/tags" style="cursor: pointer;"><span class="am-icon-tags"></span>&nbsp;Label</a></li>
                        <li><a class="top_bar" href="/update" style="cursor: pointer;"><span class="am-icon-calendar-plus-o"></span>&nbsp;To update</a></li>
                        <li><a class="top_bar" href="/friendlylink" style="cursor: pointer;"><span class="am-icon-street-view"></span>&nbsp;Friend chain</a></li>
                        <li><a class="top_bar" href="/aboutme" style="cursor: pointer;"><span class="am-icon-user"></span>&nbsp;About me</a> </li>
                    </ul>
    
                    <div class="am-topbar-right">
                        <a class="am-btn am-btn-primary am-topbar-btn am-btn-sm" href="/logout" style="color: white">Sign out</a>
                    </div>
    
                    <div class="am-topbar-right am-topbar-brand">
                        <a href="/editor" style="text-decoration: none" target="_blank">
                            <span class="write-word">Blogging</span>
                        </a>
                    </div>
    
                    <div class="am-topbar-right am-topbar-brand">
                        <a href="/reward" style="text-decoration: none">
                            <span class="reward-word">Public fundraising</span>
                        </a>
                    </div>
    
                </div>
            </div>
        </div>
    </header>

    <!--Article title-->
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-10  column">
                <input  id="editor-title" type="text" class ="form-control"  placeholder="Enter the title of the article">
            </div>
            <div class="col-md-2 column">
                <button type="button" class="btn btn-warning btn-default">Publish blog</button>
            </div>
        </div>
    </div>
    
    <!--Content editing area-->
    <!-- content start -->
    <div class="admin-content">
        <div class="admin-content-body">
            <div id="layout">
                <div id="test-editormd">
                        <textarea style="display:none;">
                                [TOC]
    
                            #### Disabled options
    
                            - TeX (Based on KaTeX);
                            - Emoji;
                            - Task lists;
                            - HTML tags decode;
                            - Flowchart and Sequence Diagram;
    
                            #### Editor.md directory
    
                                editor.md/
                                        lib/
                                        css/
                                        scss/
                                        tests/
                                        fonts/
                                        images/
                                        plugins/
                                        examples/
                                        languages/
                                        editormd.js
                                        ...
    
                            ```html
                            &lt;!-- English --&gt;
                            &lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;
    
                            &lt;!-- Traditional Chinese --&gt;
                            &lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;
                            ```
                        </textarea>
                </div>
            </div>
        </div>
    </div>

    <script src="http://editor.md.ipandao.com/examples/js/jquery.min.js"></script>
    <script src="http://editor.md.ipandao.com/editormd.min.js"></script>
    <script type="text/javascript">
        var testEditor;
        $(function() {
            testEditor = editormd("test-editormd", {
                width: "100%",
                height: 640,
                syncScrolling: "single",
                path: "../lib/",
                autoLoadModules : false // Manually load modules
            });
        });
    </script>
</body>
</html>

Edormd manually introduces dependencies: http://editor.md.ipandao.com/examples/manually-load-modules.html

The effect presented below is not the elements written on the page, but the embedded elements generated by js code.

  • Scenario Description II

When we finish writing blogs using md and storing them in the database, we must face a problem when we want to read and display the content of md blogs from the database. That is how to put md into html and display it on the page.

  • thinking

Fortunately, there are already ready-made solutions to this problem, which is marked, a js library.( https://github.com/markedjs/marked)

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> 
  <script>
    document.getElementById('content').innerHTML =
      marked('# Marked in the browser\n\nRendered by **marked**.');
  </script> 
</body>
</html>

 

Tags: Thymeleaf JQuery Database Mobile

Posted on Sun, 06 Oct 2019 18:15:52 -0700 by dlf