开源在线Markdown编辑器: https://pandao.github.io/editor.md/#download
一、下载源码
下载:https://github.com/pandao/editor.md
解压后可看到这些文件:
二、测试
2.1 依赖
博主的项目使用springboot构建,前后端一体,模板引擎使用的thymeleaf。
我们需要从刚刚下载的文件中提取以下文件:
editormd
|--css
|--fonts
|--images
|--lib
|--plugins
|--editormd.min.js
同时还需要jquery.min.js
,可在这里找到
editormd
|--examples
|--js
|--jqery.min.js
把上面的文件放在构建的springboot工程下的资源文件夹resources下:
2.2 测试md写作
依赖的引用改成thymeleaf模板引擎
<link rel="stylesheet" th:href="@{/editormd/css/editormd.min.css}" />
<div id="editor">
<!-- Tips: Editor.md can auto append a `<textarea>` tag -->
<textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/editormd/editormd.min.js}"></script>
<script type="text/javascript">
$(function() {
var editor = editormd("editor", {
// width: "100%",
// height: "100%",
// markdown: "xxxx", // dynamic set Markdown text
path : "editormd/lib/" // Autoload modules mode, codemirror, marked... dependents libs path
});
});
</script>
项目需要配置请求地址,最后启动springboot。效果如下:左边编辑栏、右边为html效果栏。
2.3 测试md2html
<link rel="stylesheet" th:href="@{/editormd/css/editormd.preview.css}"/>
<div id="test-markdown-view">
<!-- Server-side output Markdown text -->
<textarea style="display:none;">### Hello world!</textarea>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/editormd/editormd.min.js}"></script>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script type="text/javascript">
$(function() {
var testView = editormd.markdownToHTML("test-markdown-view", {
// markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
// htmlDecode : true, // Enable / disable HTML tag encode.
// htmlDecode : "style,script,iframe", // Note: If enabled, you should filter some dangerous HTML tags for website security.
});
});
</script>
在textarea
标签内的md格式的文本将转换为html文本显示。
<textarea style="display:none;">### Hello world!</textarea>
三、简单说明
3.1 md 测试说明
直接引用依赖为:
css: <link rel="stylesheet" th:href="@{/editormd/css/editormd.min.css}" />
jquery: <script th:src="@{/js/jquery.min.js}"></script>
editormd: <script th:src="@{/editormd/editormd.min.js}"></script>
在js中又通过path : "editormd/lib/"
引用了更多的依赖,所以将所有需要的依赖放在了这个目录下:
resources
|--static
|--editormd
|--lib
因为lib
里面的依赖还需要fonts
、images
等其他依赖,所以最后这些其他依赖也添加进去,就构建为这样:
resources
|--static
|--editormd
|--css
|--fonts
|--images
|--lib
|--plugins
|--editormd.min.js
3.2 md2html 测试说明
依赖的引用与md相同。
如果从数据库中读取数据,需要通过textarea
标签显示,引用好依赖后,具体代码如下:
<!-- 文章主体内容 markdown转html-->
<div id="test-markdown-view">
<!-- Server-side output Markdown text -->
<textarea style="display:none;" th:utext="${articleContent.contentMd}"></textarea>
</div>
th:utext
表示直接读取字符,不转义。