Java Web 项目中添加 editor.md 插件

作者

下载插件

首先要注意的是，editor.md是依赖于 jQuery 的，所以必须先引入 jQuery 文件（或 jQuery对象），再引入editor.md的 js文件

下载 Editor MD 源码： 首页地址：http://pandao.github.io/editor.md/ 放到 Web 项目中

添加到页面

创建一个 HTML 页面，写入如下代码

最简单的示例：

<!--注意 html 页面要放在根目录目录下，否则可能会有文件引用错误的情况-->

<link rel="stylesheet" href="editormd/css/editormd.css" />
<div id="test-editor">
    <textarea style="display:none;">### 关于 Editor.md

**Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
    </textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("test-editor", {
            // width  : "100%",
            // height : "100%",
            path   : "/editormd/lib/"    // 一定要注意这个位置，设置错误将会不生效
        });
    });
</script>

推荐阅读：

获取编辑到内容

使用 getgetMarkdown() 获取文本内容

var md = testEditor.getMarkdown();

显示编辑的内容

在页面中显示提交的 Markdown 内容

<script src="{proPath }/js/md/lib/marked.min.js"></script>
<script src="{proPath }/js/md/lib/prettify.min.js"></script>
<script src="{proPath }/js/md/lib/raphael.min.js"></script>
<script src="{proPath }/js/md/lib/underscore.min.js"></script>
<script src="{proPath }/js/md/lib/sequence-diagram.min.js"></script>
<script src="{proPath }/js/md/lib/flowchart.min.js"></script>
<script src="{proPath }/js/md/lib/jquery.flowchart.min.js"></script>
<script src="{proPath }/js/md/editormd.min.js" type="text/javascript" charset="utf-8"></script>

html 页面显示

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">
            <h3 class="">{b.title }</h3>
        </div>
    </div>
    <div class="panel-body">
        <!-- 用于显示md编辑器的md格式 -->
        <div id="doc-content">
            <textarea id="article-content" style="display: none;">{b.html}</textarea>
        </div>
    </div>
</div>

我是使用java作为后台，查询到数据传递到前台用 ${b.html} 接受显示

<script type="text/javascript">
    var testEditor;

    // ready 时进行转换
    (function() {

        //设置文本内容("#article-content").text('Markdown 内容');

        //注意：第一个参数是上面DIV的id
        var testEditor = editormd.markdownToHTML("doc-content", {
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true
        });
    });
</script>

发表评论