mavon-editor 存儲md文件以及md文件解析成html文件

一、md文件的存儲

因為是vue-cli項目，所以使用的是mavonEditor.

github地址：https://github.com/hinesboy/mavonEditor

使用方法：

首先安裝：

npm install mavon-editor --save

然后在相應的組件里引用：

//引入
import {mavonEditor} from 'mavon-editor'
import  'mavon-editor/dist/css/index.css'

//標簽使用，注意這里是mavon-editor
<mavon-editor style="height: 100%;width: 100%;"  
                           v-model="form.content"
                           ref="md" 
                           defaultOpen="edit"
                           :toolbars="toolbarsValue"
                           @imgAdd="$imgAdd" 
                           @change="changeMavon"  
                           @save="saveMavon" />

//mavon-editor菜單欄的相關配置

toolbarsValue: {
                bold: true, // 粗體
                italic: true, // 斜體
                header: true, // 標題
                underline: true, // 下划線
                strikethrough: true, // 中划線
                mark: true, // 標記
                superscript: true, // 上角標
                subscript: true, // 下角標
                quote: true, // 引用
                ol: true, // 有序列表
                ul: true, // 無序列表
                link: true, // 鏈接
                imagelink: true, // 圖片鏈接
                code: true, // code
                table: true, // 表格
                fullscreen: true, // 全屏編輯
                readmodel: true, // 沉浸式閱讀
                htmlcode: true, // 展示html源碼
                help: true, // 幫助
                /* 1.3.5 */
                undo: true, // 上一步
                redo: true, // 下一步
                trash: true, // 清空
                save: false, // 保存（觸發events中的save事件）
                /* 1.4.2 */
                navigation: true, // 導航目錄
                /* 2.1.8 */
                alignleft: true, // 左對齊
                aligncenter: true, // 居中
                alignright: true, // 右對齊
                /* 2.2.1 */
                subfield: true, // 單雙欄模式
                preview: true, // 預覽
            },

//相關的方法

//富文本保存的方法
        saveMavon(value,render){
            
          console.log("this is render"+render);
          console.log("this is value"+value);
        },
        // 綁定@imgAdd event
        $imgAdd(pos, $file){
            console.log("觸發圖片上傳");
            console.log(pos);
            console.log($file);
            // 第一步.將圖片上傳到服務器.
           var formdata = new FormData();
           formdata.append('file', $file);
           console.log(formdata);
           imgeApi(formdata).then(res=>{
               // 第二步.將返回的url替換到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指為mavonEditor實例，可以通過如下兩種方式獲取
               * 1. 通過引入對象獲取: `import {mavonEditor} from ...` 等方式引入后，`$vm`為`mavonEditor`
               * 2. 通過$refs獲取: html聲明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`為 `this.$refs.md`
               */
                console.log(res.data);
                let url="/server/"+res.data.data;
                this.$refs.md.$img2Url(pos, url);
              //相應的md格式的文件內容就是它綁定的變量

                                 //得到相應的html/文件

                                console.log(this.$refs.md.d_render);

 

           });
        },　　

我選擇的是直接將md格式的文本保存到數據庫中，然后再將其從數據庫中取出來解析。

二、md格式的文本的解析

使用marked框架來解析。

方法步驟：

npm install marked --save

在組件中引用：

import marked from 'marked'

相應的標簽：

<div v-html="readmeContent" ></div>

js方法：

//這里的newDate[0].content就是取出來的md格式的文本內容  
this.readmeContent=marked(newData[0].content||'',{
                    sanitize:true
                })

　　

存在問題：現在純粹的只是將其解析成了html文件，相應的樣式查了下，可以用highlight.js，但折騰了好久都沒引用成功，等之后再仔細看看marked的官方文檔再說....

                  地址：https://marked.js.org/#/README.md#README.md