項目#editormd 的使用

markdown文本 解析

 

        <div id="test-editor">
    <textarea style="display:none;">### 關於 Editor.md

**Editor.md** 是一款開源的、可嵌入的 Markdown 在線編輯器（組件），基於 CodeMirror、jQuery 和 Marked 構建。
         <script>alert(123);</script>
    </textarea>
        </div>
        <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script src="editormd/lib/marked.min.js"></script>
        <script src="editormd/lib/prettify.min.js"></script>
        <script src="editormd/lib/raphael.min.js"></script>
        <script src="editormd/lib/underscore.min.js"></script>
        <script src="editormd/lib/sequence-diagram.min.js"></script>
        <script src="editormd/lib/flowchart.min.js"></script>
        <script src="editormd/lib/jquery.flowchart.min.js"></script>
        <script src="editormd/js/editormd.min.js"></script>
        <script type="text/javascript">
            var llEditor = null;
            $(function () {
                llEditor = editormd.markdownToHTML("test-editor", {
                    htmlDecode      : "style,script,iframe",
                    emoji           : true,
                    taskList        : true,
                    tex             : true,  // 默認不解析
                    flowChart       : true,  // 默認不解析
                    sequenceDiagram : true  // 默認不解析
                });
            });
        </script>

    </div>

 

 

markdown在線編輯器

    <div style=" min-height: 700px;" class="container-fluid cm-container-white">
        <#--            編輯內容頁面-->


        <div id="test-editor">
    <textarea style="display:none;">### 關於 Editor.md

**Editor.md** 是一款開源的、可嵌入的 Markdown 在線編輯器（組件），基於 CodeMirror、jQuery 和 Marked 構建。
         <script>alert(123);</script>
    </textarea>
        </div>
        <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script src="editormd/lib/marked.min.js"></script>
        <script src="editormd/lib/prettify.min.js"></script>
        <script src="editormd/lib/raphael.min.js"></script>
        <script src="editormd/lib/underscore.min.js"></script>
        <script src="editormd/lib/sequence-diagram.min.js"></script>
        <script src="editormd/lib/flowchart.min.js"></script>
        <script src="editormd/lib/jquery.flowchart.min.js"></script>
        <script src="editormd/js/editormd.min.js"></script>
        <script type="text/javascript">
            var llEditor = null;
            $(function () {
                llEditor = editormd("test-editor", {
                    placeholder: '本編輯器支持Markdown編輯，左邊編寫，右邊預覽',  //默認顯示的文字，這里就不解釋了
                    width: "90%",
                    htmlDecode      : "style,script,iframe",
                    height: 640,
                    syncScrolling: "single",
                    path: "editormd/lib/",   //你的path路徑（原資源文件中lib包在我們項目中所放的位置）
                    theme: "dark",//工具欄主題
                    previewTheme: "dark",//預覽主題
                    editorTheme: "pastel-on-dark",//編輯主題
                    saveHTMLToTextarea: true,
                    emoji: false,
                    taskList: true,
                    tocm: true,         // Using [TOCM]
                    tex: true,                   // 開啟科學公式TeX語言支持，默認關閉
                    flowChart: true,             // 開啟流程圖支持，默認關閉
                    sequenceDiagram: true,       // 開啟時序/序列圖支持，默認關閉,
                    toolbarIcons: function () {  //自定義工具欄，后面有詳細介紹
                        return editormd.toolbarModes['simple']; // full, simple, mini
                    },
                });
                //上面的挑有用的寫上去就行
            })
        </script>

    </div>

## 注意點：

1. 一定要加上 htmlDecode ,不然你再編輯的時候 寫了個 <script> 會被解析，很難受，而且還有 xss注入的漏洞，因此 后台還要再轉義一下。