SSM博客開發:前臺插件-editor.md

一、editor.md簡介

editor.md是國內開源的一款在線Markdown編輯器,單純基于前端JavaScript實現,和后端什么語言無關。我后端用的Java,在前臺JSP中引入資源時用的spring標簽。可從官網進行下載,下載后文件結構如圖:

structure.jpg

二、使用

參照了兩篇博文:

三、SSM博客中的使用:

  • 寫的博客主要在能夠支持標準Markdown語法的條件下支持上傳圖片和代碼顯示,因此在項目中主要使用到了如下的文件,其中js文件夾中包含了editormd.min.jsjquery.min.js
structure2.jpg
  • 引入
<link rel="stylesheet" href="<spring:url value="/resource/css/editormd.min.css"/>" />
<script src="<spring:url value="/resource/js/jquery.min.js"/>"></script>
<script src="<spring:url value="/resource/js/editormd.min.js"/>"></script>
<script type="text/javascript">
        $(function() {
          editormd("my-editormd", {
          width   : "90%",
          height  : 640,
          syncScrolling : "single",
          path    : "<spring:url value="/resource/lib/"/>", (自己工程的lib地址)
          imageUpload : true,
          imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
          imageUploadURL : "<spring:url value="/uploadFile"/>",  (處理圖片上傳的url)
          saveHTMLToTextarea : true
                    });
            });
</script>
  • 在HTML中寫一個div節點,包含兩個textarea,格式如下:
<div id="my-editormd"> 
    <textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea>
    <!-- 注意:name屬性的值-->
    <textarea id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea>
</div>
  • Markdown文檔頁面展示:
  1. 引入
 <link rel="stylesheet" href="<spring:url value="/resource/css/editormd.min.css"/>" />
<link rel="stylesheet" href="<spring:url value="/resource/css/editormd.preview.min.css"/>" />
<script src="<spring:url value="/resource/js/jquery.min.js"/>"></script>
<script src="<spring:url value="/resource/lib/marked.min.js"/>"></script>
<script src="<spring:url value="/resource/lib/prettify.min.js"/>"></script>
 <script src="<spring:url value="/resource/js/editormd.min.js"/>"></script>
  1. JavaScript代碼
<script type="text/javascript">
            $(function(){
                editormd.markdownToHTML("content")  ("content"為包裹顯示內容的div的id值如下)
    });
</script>
<div id="content" class="mdl-cell mdl-card mdl-cell--12-col mdl-shadow--2dp content editormd-preview-theme-dark">
    <textarea style="display:none;" name="editormd-markdown-doc">${article.body}</textarea>
</div> 

(注意:<textarea>)標簽內的name=""editormd-markdown-doc"值得設定一定別忘了,在之前的博客中沒有寫清楚這一點,導致調了半天才發現。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Swift版本點擊這里歡迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh閱讀 25,508評論 7 249
  • 現在好像能明白了什么叫 使自己變得優秀,才能遇到更好的人 但最可恨的就是 遇到一個自己可能會喜歡的人的時候,發現自...
    在世界行走的水瓶座閱讀 141評論 0 1
  • 理想縱飛泡沫, 現實即或骨感。 真理永遠不錯, 大道終將實現! 人心雖然泡沫, 生活或遭骨感。 不能因此冷漠, 良...
    詩箴傳歌閱讀 252評論 8 12
  • 找尋依靜 帶著耳塞,一如從前地沉浸在自己的世界里。當內心開始浮躁,想要尋求一片安靜時,總是會選擇聽歌。在我看來,這...
    小依靜閱讀 237評論 2 1