引入bootstrap-markdown编辑器

- 日理万妓 2023-02-12 06:24 11阅读 0赞

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

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

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

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

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

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

设置好之后就会出现

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70]

点击 Preview预览效果 会出现

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70 1]

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

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

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

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

如果下载完整代码，请到 https://gitee.com/soul\_PreCoder/springsecurity\_demo.git，记到关注哟

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200525085424829.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020052508544078.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA==,size_16,color_FFFFFF,t_70