前言：相信作為開發人員，百分之90的同行都會使用markdown編輯器進行文本記錄，這是絕對開發必備的工具之一啦！本篇博客主要是針對gitee上有很多小伙伴問到如何整合markdown的一個問題（目前博主還是菜鳥一枚，大神勿噴），在這里我就從0開始記錄的我每一個開發步驟，話不多說，直接上代碼，
1、首先來看檔案的目錄結構，本文主要是用axios，其組件自行匯入即可
2、本文主要使用的是editor.md-master組件，請大家自行匯入以下組件到專案的靜態資源中
git clone git@gitee.com:adams9812/editor.md-master.git
3、首先是引入markdown組件的內容，以下為編輯頁面代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>基于Spring Cloud的知識付費系統</title>
<link type="text/css" href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link type="text/css" href="css/md_css.css" rel="stylesheet">
<!-- markdown編輯器的引入 -->
<link rel="stylesheet" href="editor.md-master/css/editormd.min.css"/>
<link rel="stylesheet" href="editor.md-master/css/editormd.preview.min.css"/>
<style>
body {
background-attachment: fixed;
/*background-image: url("images/www2.jpg"); 背景圖 */
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
}
input {
border-radius: 3px;
border: solid black 1px;
}
</style>
</head>
<body>
<!--<%--<font style="float: right;">Design By Adams.</font>--%>-->
<font style="font-size: 50px;float: right;margin-right: 10%;font-weight: bolder">
基于Spring Cloud的知識付費系統
</font>
<div id="app">
<!--發帖 -->
<form action="/consumer/topic/editTopic" method="post" enctype="multipart/form-data">
<font style="color: black;margin-left: 9%;font-weight: bolder">標題：</font><input style="width: 20%;height: 5%" type="text" id="title" name="title"><br><br>
<font style="color: black;margin-left: 9%;font-weight: bolder">簡介：</font><input style="width: 20%;height: 5%" type="text" id="topicMsg" name="topicMsg"><br><br>
<!-- markdown的文本框 -->
<div id="my-editormd" style="z-index: 2000;">
<textarea class="editormd-markdown-textarea" name="content" id="content"></textarea>
</div>
<center>
<button type="submit" class="btn btn-primary">發表評論</button>
<a class="btn btn-danger" href="#">回傳</a>
</center>
</form>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="editor.md-master/lib/marked.min.js"></script>
<script src="editor.md-master/lib/prettify.min.js"></script>
<script src="editor.md-master/editormd.min.js"></script>
<script type="text/javascript">
$(function() {
var myEditor = editormd("my-editormd", {
width : "82%",
height : 640,
syncScrolling : "single",
//你的lib目錄的路徑
path : "editor.md-master/lib/",
/**上傳圖片相關配置如下*/
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
onl oad: function() {
// 引入插件 執行監聽方法
editormd.loadPlugin("editor.md-master/plugins/image-handle-paste/image-handle-paste", function(){
myEditor.imagePaste();
});
},
//這個配置，方便post提交表單
saveHTMLToTextarea : true,
emoji: true,//emoji表情，默認關閉
taskList: true,
tocm: true, // Using [TOCM]
tex: true,// 開啟科學公式TeX語言支持，默認關閉
flowChart: true,//開啟流程圖支持，默認關閉
sequenceDiagram: true,//開啟時序/序列圖支持，默認關閉,
dialogLockScreen : false,//設定彈出層對話框不鎖屏，全域通用，默認為true
dialogShowMask : false,//設定彈出層對話框顯示透明遮罩層，全域通用，默認為true
dialogDraggable : false,//設定彈出層對話框不可拖動，全域通用，默認為true
dialogMaskOpacity : 0.4, //設定透明遮罩層的透明度，全域通用，默認值為0.1
dialogMaskBgColor : "#000",//設定透明遮罩層的背景顏色，全域通用，默認為#fff
onchange : function onchangeContent() {
if(this.htmlTextarea[0].defaultValue != ""){
$("#issue-submit").removeAttr("disabled");
} else {
layer.tips('文章內容不能為空!', '#my-editormd', {
tips: [1, '#ff6620'] //還可配置顏色
});
$("#issue-submit").attr("disabled", "disabled");
}
}
});
});
</script>
<script src="js/images.js"></script>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/editArticle.js"></script>
</body>
</html>
5、編輯好內容之后就可以直接入庫保存了
6、來看我們的資料渲染頁面的html代碼
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="author" content="orders by dede58.com"/>
<title>知識付費系統 - 首頁</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- markdown文本的決議器 -->
<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="editor.md-master/css/editormd.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
<script src="editor.md-master/examples/js/jquery.min.js"></script>
<script src="editor.md-master/editormd.min.js"></script>
<script src="editor.md-master/lib/marked.min.js"></script>
<script src="editor.md-master/lib/prettify.min.js"></script>
<script src="editor.md-master/lib/raphael.min.js"></script>
<script src="editor.md-master/lib/underscore.min.js"></script>
<script src="editor.md-master/lib/sequence-diagram.min.js"></script>
<script src="editor.md-master/lib/flowchart.min.js"></script>
<script src="editor.md-master/lib/jquery.flowchart.min.js"></script>
<script src="editor.md-master/editormd.js"></script>
</head>
<body>
<div id="app">
<!-- start header -->
<header>
<div class="top center">
<div class="left fl">
<ul>
<li>
<!-- 這里直接去登錄注冊 -->
<a href="#" target="_blank">基于Spring Cloud的知識付費系統</a>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="right fr">
<div style="color: #cccccc">
<a href="login.html" style="color: #eeeeee" target="_self">登錄</a>
|
<a href="register.html" style="color: #eeeeee" target="_self">注冊</a>
</div>
</div>
<div class="clear"></div>
</div>
</header>
<!--end header -->
<br>
<br>
<center>
<h2>{{topic.title}}</h2>
</center>
<br>
<center>
<table id="showTopic" class="table table-hover" style="width: 70%;margin-top: 15px;">
<thead>
<tr>
<th style="text-align: center" colspan="2">
<img v-bind:src="topic.userImg" style="width: 28px;height: 28px;border-radius:50%;">
<a href="" style="font-size: 20px;color: #101010;">{{topic.userName}}</a>
<!--付費積分需求 XXX 分-->
</th>
</tr>
</thead>
<tbody>
<tr class="active" style="line-height: 1.8">
<td align="left" colspan="2">
<span style="font-size: 18px;">
<!-- 展示帖子內容 -->
<div id="resultContent"></div>
</span>
</td>
</tr>
<tr>
<td>
<span style="font-size: 20px">
<a href="#" style="color: gray">
評論 {{topic.commentNum}}
點贊 {{topic.likeNum}}
收藏 {{topic.collectNum}}
</a>
</span>
</td>
<td align="right">
<span style="font-size: 20px;">
創建于:
</span>
<span style="font-size: 20px;">
{{topic.created}}
</span>
</td>
</tr>
</tbody>
</table>
</center>
</div>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/topicDetail.js"></script>
</body>
</html>
7、再來看我們渲染頁面的js代碼
new Vue({
el:"#app",
data:{
topic:{
id:"",
title:"",
content:"",
photo:"",
topicMsg:"",
userName:"",
userImg:"",
commentNum:"",
likeNum:"",
collectNum:"",
created:""
},
total:"", // 總頁數
pageNum:"1", // 當前頁數,默認為1
topicList:[] // 帖子集合
},
methods:{
// 展示帖子詳情
getTopicDetail:function (topicId) {
//在當前方法中定義一個變數，表明是vue物件
var _this = this;
// 這里直接去拿存在redis中的topicId
axios.get('/consumer/topic/getById')
.then(function (response) {
//把回傳的總頁數賦值給這里的總頁數, 總數量/10 = 總頁數
_this.topic = response.data.data;
_this.showTopicContent(_this.topic.content);
})
.catch(function (error) {
console.log(error);
})
},
// 展示內容主題
showTopicContent:function (content) {
alert(content);
var text = content;
//帖子內容
var articles_all = "";
var listArticle_fcontent = text;
articles_all = articles_all +
'<div class="row">' +
' <div class="col-md-12">' +
' <div id="artice-doc-content">' +
' <!-- 帖子內容 -->' +
' <textarea style="display:none;">'+listArticle_fcontent+'</textarea>' +
' </div>' +
' </div>' +
'</div>'
$("#resultContent").html(articles_all);
/*把MD語法檔案，轉換為HTML語法 - js*/
var testEditor;
$(function () {
testEditor = editormd.markdownToHTML("artice-doc-content", {//注意：這里是上面DIV的id
htmlDecode: "style,script,iframe",
emoji: true,
taskList: true,
tex: true, // 默認不決議
flowChart: true, // 默認不決議
sequenceDiagram: true, // 默認不決議
codeFold: true,
});
});
}
},
created:function () {
// 獲取帖子的詳情資訊
this.getTopicDetail();
}
});
8、大結局，直接看效果圖
踩的幾個坑
- 這里主要是，當我們從資料庫獲取文本內容的時候，第一時間我的想法是渲染到一個隱藏的div里面，然后通過獲取div的內容來渲染到markdown組件里面，這種方式是不對的，我們不能把資料經過div來展示，最好就是直接在js中獲取到全部資料的時候，直接在js里面把資料渲染給指定的div，否則div是不會自動換行的，從而導致展示的效果不如意，（或者讓div文本內容按照存盤的格式展示也行）
最后祝大家生活愉快！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/267391.html
標籤：其他
上一篇：【博客工具】typora中的數學公式（字典型，用時查閱）
下一篇：小彩燈特效 html+css