完美引入bootstrap-markdown编辑器
今天给大家分享的时候，怎么在bootstrap里面集成bootstrap-markdown的编辑器。Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。Markdown 语言在 2004 由约翰·格鲁伯（英语：John Gruber）创建的。Markdown 编写的文档后缀为 .md, .markdown
下面就带着大家进入bootstrap-markdown的使用。
(1)首先下载bootstrap-markdown。当然下载地址很多
https://www.bootcdn.cn/bootstrap-markdown/ 需要找对应的匹配版本 有点麻烦
https://gitee.com/soul_PreCoder/springsecurity_demo.git 推荐下载项目 上面效果已实现
(2)下载下来之后，你就可以进行在页面进行引入
<scriptth:src="@{/static/js/plugins/markdown/js/markdown.js}"></script>
<scriptth:src="@{/static/js/plugins/markdown/js/to-markdown.js}"></script>
<scriptth:src="@{/static/js/plugins/markdown/js/bootstrap-markdown.js}"></script>
我这里使用了 thymleaf ，你直接在您项目里面引入对应的路径就可以了
(3)项目的页面里面使用
首先在页面定义的容器，加载bootstrap-markdown编辑器
<textareaid="editor"type="text"name="desc"
data-provide="markdown"rows="10">
</textarea>
(4)在JS代码里面进行容器的初始化操作
//初始化编辑器
varmarkDownObj=$("#editor").markdown({
autofocus:true,//编辑器实例化之后自动聚焦操作
savable:false//编辑器实例化之后有保存按钮 这里不需要 设置为false
})
设置好之后就会出现
点击 Preview预览效果 会出现
(5)想在保存表单的时候，获取到markdown编辑框里面的值
varcontent=markDownObj[0].value.trim();
markDownObj值的上面初始化的markdown的对象
(6)获取到值保存到数据库的操作就不用来描述
如果下载完整代码，请到 https://gitee.com/soul_PreCoder/springsecurity_demo.git，记到关注哟
