解決textarea內容儲存到MySQL再顯示到html中沒有換行的問題

解決textarea內容儲存到MySQL再顯示到html中沒有換行的問題

最近在做專案時需要用一個MarkDown編輯器編寫文章然後儲存到資料庫中,如下圖所示,使用的是MdEditor

這裡寫圖片描述

但通過後臺提取資料顯示到html頁面中時,卻發現沒有換行。原來這是因為資料庫把換行符過濾掉了。

那該怎麼辦呢,其實可以用一種迂迴的方法將其寫入到資料庫中,就是可以先把”\n”換行符轉換為特定的字串,讀取出來的時候再替換回來。

比如,提交資料時利用 js 獲取 textarea 中的內容,再把所有換行符轉為 <br>。

    <script type="text/javascript">
var content = $("#form1 textarea").val();
content = content.replace(/\n|\r\n/g,"<br>");
</script>

讀取出來的時候再替換回來

<script type="text/javascript">  
$(function() {  
var content ='${blog.article}'; //使用el表示式獲取資料
content = content.replace(/<br>/g,"\n");//將<br>替換為換行符 "\n"   
//$("div_demo").text(content);
});  
</script> 

如果是一般textarea內容像上面那樣就行了,但由於我這是markdown內容,還要將markdown內容轉為 html 程式碼段

<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js">
<script type="text/javascript"> 
var converter = new showdown.Converter(); //初始化轉換器
var htmlcontent  = converter.makeHtml(content); //將MarkDown轉為html格式的內容
$("#article .article-entry").html(htmlcontent);//新增到 div 中 顯示出來
</script> 

最後顯示效果,經過換行轉換和MarkDown轉換後文章能夠完美顯示出來。(程式碼段高亮是另外加的啦)

這裡寫圖片描述