项目总结之前端页面常用插件

在做完一个springboot的个人博客项目，想总结下从数据库建表到完成的对自己有点价值的点，包括碰到的问题及解决过程和方法，希望读者也能找到自己想要的。这篇博客主要是前端页面用到的一些插件及其使用方法。

先讲讲在项目中需要实现什么功能吧。在我的博客项目中，博客的发布需要有MarkDown编辑器，然后博客详情页需要有鼠标的滚动监测，还有一个生成二维码的用于扫描观看此篇博客，还有博客正文的排版插件，代码高亮，平滑滚动，正文的目录生成，动画效果等等。

注意：很多插件都依赖jquery，所以事先务必引入jquery！！！

MarkDown编辑器

先看看效果：
在这个编辑器的左边区域是编写MarkDown语法的区域，右边是展示区域。看实际效果：

官网地址

https://pandao.github.io/editor.md/
其实官网有简要的用法，但是这里还是记录一下怎样简单的使用。

怎么实现呢？

先从官网下载好压缩包，然后在我们springboot程序的resources文件夹下的static目录下新建一个插件文件夹lib，如图：

解压缩后将其中的css等一些文件夹或文件(不是全部)复制进lib目录下新建的editormd目录，如图：

再在需要这个插件的页面中引入css，js还进行一些设置即可：
这里需要注意的是这个js是依赖于jquery的，所以在这个js之前得先声明jquery，比如我使用cdn形式的jquery:
然后在自定义的script标签中初始化编辑器：

<script>
		// 初始化markdown编辑器
		// 里面的path是基于static定位的(在thymeleaf动态页面中基于static，要不然还是写我注释的那个path)
		var testEditor;
		$(function() {
   
			testEditor = editormd("md-content", {
   
				width : "100%",
				height : 640,
				syncScrolling : "single",
				//path : "../../static/lib/editormd/lib/"
				path    : "/lib/editormd/lib/"
			});

		});

	</script>

在正式的body标签中还得声明一个id为md-content的div：

<!--style="z-index: 1 !important;" 代表叠放层次,当全屏时,编辑器会位于所有组件上方-->
<div id="md-content" style="z-index: 1 !important;">
						<textarea name="content" placeholder="博客内容" th:text="*{content}" style="display: none;">
								
						</textarea>
</div>

排版插件

官