完美引入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，记到关注哟