《Editor.md文檔書寫神器-筆錄》

簡(jiǎn)介

Editor.md是編輯書寫Markdown的插件?？梢詭椭覀儠鴮懗銎恋腗arkdown文檔。
下面我介紹使用Editor.md插件，集成到web前端。功能點(diǎn)：

  • 1.實(shí)現(xiàn)markdown文檔編輯器
  • 2.實(shí)現(xiàn)markdown文檔查看器
    使用markdown文檔編輯器書寫完文檔后保存到服務(wù)器，然后通過markdown文檔查看器去請(qǐng)求服務(wù)器獲取到之前保存的*.md文檔進(jìn)行瀏覽查看。掌握了它我們就可以自己去擴(kuò)展屬于自己的文檔編輯工具甚至平臺(tái)。

實(shí)現(xiàn)步驟：

建議先到官方看下如何使用，避免少走彎路
官方地址 https://pandao.github.io/editor.md/examples/index.html

  • 2.集成到項(xiàng)目中
    下載下來解壓后是一個(gè)npm項(xiàng)目，你可以直接使用 也可以自行再擴(kuò)展功能，下載依賴modules，再編譯構(gòu)建。這里 我就不重新構(gòu)建了，需要重新構(gòu)建的同學(xué)如果不清楚如何構(gòu)建npm項(xiàng)目可以參考我的其它文章《NodeJS開發(fā)教程5-包管理工具npm》http://www.itdecent.cn/p/445d0168d691
    image.png

好，接下來我們把下載的Editor.md插件copy到我們的項(xiàng)目，只copy我們用到的文件也可以，或者干脆暴力一點(diǎn)把所有文件都copy到項(xiàng)目（發(fā)布版建議去除非依賴文件）我把它c(diǎn)opy到了項(xiàng)目的前端插件目錄中（并且我重新命了下文件夾的名稱：editor.md）：

image.png
  • 3.實(shí)現(xiàn)markdown文檔編輯器
    我在項(xiàng)目的前端目錄中創(chuàng)建了 md-editor.html 用來實(shí)現(xiàn)markdown文檔編輯器：
image.png

md-editor.html文件內(nèi)容：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>Editor.md-Markdown編輯器</title>
        <link rel="stylesheet" href="../plugins/editor.md/examples/css/style.css" />
        <link rel="stylesheet" href="../plugins/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="../plugins/editor.md/css/editormd.css" />

    </head>
    <body>
        <div id="layout">
            <header>
                <h1 style="text-align: center;">Editor.md-Markdown編輯器</h1>
            </header>
            <div style="width: 90%;margin: auto;">
                <button style="margin: 1rem;" class="btn btn-success pull-right" type="button" onclick="saveDoc()">保存文檔</button>
            </div>
            <div id="test-editormd">
                <textarea style="display:none;">

[TOC]

#MD文檔編輯器（爽）

#### 可以顯示列表項(xiàng)

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### 可以顯示目錄 directory

    editor.md/
            lib/
            css/
            scss/
            tests/
            fonts/
            images/
            plugins/
            examples/
            languages/
            editormd.js
            ...
####[TOC]文檔目錄自動(dòng)生成

頭部引入 '[TOC]' 參考本文檔頭部，目錄索引自動(dòng)生成，很方便的！

</textarea>
            </div>
        </div>
        <script src="../plugins/editor.md/examples/js/jquery.min.js"></script>
        <script src="../plugins/editor.md/editormd.min.js"></script>
        <script type="text/javascript">
            var testEditor;

            $(function() {
                testEditor = editormd("test-editormd", {
                    width   : "90%",
                    height  : 640,
                    syncScrolling : "single",
                    path    : "../plugins/editor.md/lib/"
                });
                
                /*
                // or
                testEditor = editormd({
                    id      : "test-editormd",
                    width   : "90%",
                    height  : 640,
                    path    : "../plugins/editor.md/lib/"
                });
                */
            });
        </script>
    <script>
        //保存文檔
        function saveDoc()
        {
            // 獲取Markdown源碼
            var mdstr=testEditor.getMarkdown();
            console.log(mdstr);
            //保存到服務(wù)器
            $.post("/bf/saveDoc",{filename:"test1",content:mdstr},function(data)
            {
                alert(data);
            });
        }
    </script>
    </body>
</html>
  • 4.實(shí)現(xiàn)服務(wù)器存儲(chǔ)編輯器內(nèi)容
    服務(wù)器我用的是springboot,當(dāng)然你也可以用你熟悉的服務(wù)器來管理文檔內(nèi)容。
import com.yu.scloud.baseframe.frame.utils.FileOperate;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.ServletRequest;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;

@RestController
public class MDWriterController {

    @RequestMapping("/saveDoc")
    public String saveDoc(String filename, String content, ServletRequest request)
    {
        try {
            File file=getFile("/static/demo/doc/");
            FileOperate.writeFile(file.getAbsolutePath()+filename+".md",content);
            return "保存成功";
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "保存失敗";
    }
    private File getFile(String rel) throws FileNotFoundException {
        //獲取跟目錄
        File path = new File(ResourceUtils.getURL("classpath:").getPath());
        return new File(path.getAbsolutePath(),rel);
    }
    @RequestMapping("/viewDoc")
    public String viewDoc(String filename)
    {
        try {
            File file=getFile("/static/demo/doc/");
            return FileOperate.readFile(file.getAbsolutePath()+filename+".md");
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "";
    }
}

啟動(dòng)服務(wù)器訪問md-editor.html，編輯好信息后就可以保存文檔了：


image.png

文檔會(huì)保存到你指定的服務(wù)器目錄中，并命名為：*.md。我這里命名為：test1.md。

  • 5.實(shí)現(xiàn)markdown文檔查看器
    新建 view-md.html 內(nèi)容如下：
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="../plugins/editor.md/examples/css/style.css" />
        <link rel="stylesheet" href="../plugins/editor.md/css/editormd.preview.css" />
        <style>            
            .editormd-html-preview {
                width: 90%;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div id="layout">
            <header>
                <h1>Markdown轉(zhuǎn)HTML的顯示處理</h1> 
                <p>即：非編輯情況下的HTML預(yù)覽</p>
                <p>HTML Preview(markdown to html)</p>       
            </header>
            <div id="test-editormd-view">
               <textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>               
            </div>
        </div>
        <!-- <script src="js/zepto.min.js"></script>
        <script>        
            var jQuery = Zepto;  // 為了避免修改flowChart.js和sequence-diagram.js的源碼，所以使用Zepto.js時(shí)想支持flowChart/sequenceDiagram就得加上這一句
        </script> -->
        <script src="../plugins/editor.md/examples/js/jquery.min.js"></script>
        <script src="../plugins/editor.md/lib/marked.min.js"></script>
        <script src="../plugins/editor.md/lib/prettify.min.js"></script>
        
        <script src="../plugins/editor.md/lib/raphael.min.js"></script>
        <script src="../plugins/editor.md/lib/underscore.min.js"></script>
        <script src="../plugins/editor.md/lib/sequence-diagram.min.js"></script>
        <script src="../plugins/editor.md/lib/flowchart.min.js"></script>
        <script src="../plugins/editor.md/lib/jquery.flowchart.min.js"></script>

        <script src="../plugins/editor.md/editormd.js"></script>
        <script type="text/javascript">
            $(function() {
                var testEditormdView;
                //可以加入模板引擎或是訪問query動(dòng)態(tài)傳入view的md文檔
                $.get("/bf/viewDoc?filename=test1",function(data)
                {
                    var content=data;
                    $("#test-editormd-view textarea").text(content);
                    testEditormdView = editormd.markdownToHTML("test-editormd-view", {
                        htmlDecode      : "style,script,iframe",  // you can filter tags decode
                        emoji           : true,
                        taskList        : true,
                        tex             : true,  // 默認(rèn)不解析
                        flowChart       : true,  // 默認(rèn)不解析
                        sequenceDiagram : true,  // 默認(rèn)不解析
                    });
                });
            });
        </script>
    </body>
</html>

指定剛剛生成的 test1.md文檔資源查看：

image.png

這樣我們就實(shí)現(xiàn)了簡(jiǎn)單的文檔編輯、上傳、以及查看功能，是不是很簡(jiǎn)單！END。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容