完美引入bootstrap-markdown編輯器

今天給大家分享的時(shí)候，怎么在bootstrap里面集成bootstrap-markdown的編輯器。Markdown 是一種輕量級(jí)標(biāo)記語言，它允許人們使用易讀易寫的純文本格式編寫文檔。Markdown 語言在 2004 由約翰·格魯伯（英語：John Gruber）創(chuàng)建的。Markdown 編寫的文檔后綴為 .md, .markdown

下面就帶著大家進(jìn)入bootstrap-markdown的使用。

(1)首先下載bootstrap-markdown。當(dāng)然下載地址很多

https://www.bootcdn.cn/bootstrap-markdown/? 需要找對(duì)應(yīng)的匹配版本 有點(diǎn)麻煩

https://gitee.com/soul_PreCoder/springsecurity_demo.git? 推薦下載項(xiàng)目 上面效果已實(shí)現(xiàn)

(2)下載下來之后，你就可以進(jìn)行在頁面進(jìn)行引入

<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 ，你直接在您項(xiàng)目里面引入對(duì)應(yīng)的路徑就可以了

(3)項(xiàng)目的頁面里面使用

首先在頁面定義的容器，加載bootstrap-markdown編輯器

<textareaid="editor"type="text"name="desc"

data-provide="markdown"rows="10">

</textarea>

(4)在JS代碼里面進(jìn)行容器的初始化操作

?//初始化編輯器

varmarkDownObj=$("#editor").markdown({

autofocus:true,//編輯器實(shí)例化之后自動(dòng)聚焦操作

savable:false//編輯器實(shí)例化之后有保存按鈕 這里不需要 設(shè)置為false

})

設(shè)置好之后就會(huì)出現(xiàn)

點(diǎn)擊 Preview預(yù)覽效果 會(huì)出現(xiàn)

(5)想在保存表單的時(shí)候，獲取到markdown編輯框里面的值

varcontent=markDownObj[0].value.trim();

markDownObj值的上面初始化的markdown的對(duì)象

(6)獲取到值保存到數(shù)據(jù)庫的操作就不用來描述

如果下載完整代碼，請(qǐng)到? https://gitee.com/soul_PreCoder/springsecurity_demo.git，記到關(guān)注喲