引入bootstrap-markdown编辑器

引入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)下载下来之后，你就可以进行在页面进行引入

<script  th:src="@{/static/js/plugins/markdown/js/markdown.js}"></script>
<script  th:src="@{/static/js/plugins/markdown/js/to-markdown.js}"></script>
<script  th:src="@{/static/js/plugins/markdown/js/bootstrap-markdown.js}"></script>

我这里使用了 thymleaf ，你直接在您项目里面引入对应的路径就可以了

(3)项目的页面里面使用

首先在页面定义的容器，加载bootstrap-markdown编辑器

<textarea id="editor"   type="text" name="desc" 
          data-provide="markdown" rows="10">
</textarea>

(4)在JS代码里面进行容器的初始化操作

  			//初始化编辑器
           var  markDownObj = $("#editor").markdown({
                autofocus: true,//编辑器实例化之后自动聚焦操作
                savable:false //编辑器实例化之后有保存按钮 这里不需要 设置为false
            })

设置好之后就会出现

点击 Preview预览效果 会出现

(5)想在保存表单的时候，获取到markdown编辑框里面的值

var content = markDownObj[0].value.trim();

markDownObj值的上面初始化的markdown的对象

(6)获取到值保存到数据库的操作就不用来描述

如果下载完整代码，请到 https://gitee.com/soul_PreCoder/springsecurity_demo.git，记到关注哟