springboot 集成markdown 编辑器

2024-02-22 15:06:58

MarkDown编辑器

1）资源下载

到官网下载MarkDown的资源包：
Editor.md 下载：https://pandao.github.io/editor.md

2）使用：

把相关资源文件copy到项目static目录下
页面引入editor.md 的核心css , js , 注意还需要先引入jquery ，editor.md依赖jquery

<link rel="stylesheet" href="/mylib/editormd/css/editormd.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/mylib/editormd/editormd.min.js"></script>

页面html 标签

<div id="md-content" style="z-index: 1 !important;">
	<textarea placeholder="博客内容" rows="20" name="content" style="display:none;">

	</textarea>
</div>

注意：外层div 的id. 和样式，<textarea></textarea> 标签样式属性 style=“display:none”

页面加载完成初始化editor.md 编辑器

<script type="text/javascript">
// 初始化markdown编辑器
	var contentEditor;
	$(function() {
		contentEditor = editormd({
			id		:'md-content',  //外层div的id
			width   : '100%',		//区域尺寸：宽
			height  : 640,			//区域尺寸：高
			syncScrolling : 'single',	// 单滚动
			path    : '/mylib/editormd/lib/'	//edit.md插件目录lib的路径
		});
	});
</script>

加载后的效果：

这样就可以正常使用了,如下效果：