Markdown編輯器Editor.md使用方式

摘要：

搭建我的博客時，涉及文章上傳，文章展現，這裏須要一個Markdown插件，mark一下。

Editormd下載地址：http://pandao.github.io/editor.md/

因爲前端採用了SPA模式，這裏咱們須要在index.html頁面引入editormd的相關文件。

文件上傳頁面配置：

dom部分：

<div id="write-editormd">
    <textarea></textarea>
</div>

腳本部分（上傳功能）：

 initEditer() { this.testEditor = editormd("write-editormd", { placeholder: '開始',  //默認顯示的文字，這裏就不解釋了
            width: "100%", height: 640, syncScrolling: "single", path: "editor/lib/",   //你的path路徑（原資源文件中lib包在咱們項目中所放的位置）
            theme: "dark",//工具欄主題
            previewTheme: "dark",//預覽主題
            editorTheme: "pastel-on-dark",//編輯主題
            saveHTMLToTextarea: true, emoji: false, taskList: true, tocm: true,         // Using [TOCM]
            tex: true,                   // 開啓科學公式TeX語言支持，默認關閉
            flowChart: true,             // 開啓流程圖支持，默認關閉
            sequenceDiagram: true,       // 開啓時序/序列圖支持，默認關閉,
            toolbarIcons: function () {  //自定義工具欄，後面有詳細介紹
                return editormd.toolbarModes['simple']; // full, simple, mini
 }, /**上傳圖片相關配置以下*/ imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "./api/document/upload" }); }

獲取文件內容：

var content = this.testEditor.getMarkdown();

展現文章頁面配置：

dom部分：

<div id="read-editormd">
    <textarea></textarea>
</div>

腳本部分：

 initEditer() { var testEditor; testEditor = editormd.markdownToHTML("read-editormd", { markdown: this.state.data.content, htmlDecode: "style,script,iframe",  // you can filter tags decode
            emoji: true, taskList: true, tex: true,
            flowChart: true,
            sequenceDiagram: true,
            imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], // imageUploadURL : "../src/",//注意你後端的上傳圖片服務地址
            
            //editorTheme: "pastel-on-dark",//編輯器的主題顏色
            theme: "gray",//頂部的主題
            previewTheme: "dark"//顯示的主題
 }); testEditor.getMarkdown(); }

圖片上傳功能配置：

在編輯配置部分配置

/**上傳圖片相關配置以下*/ imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "./api/document/upload"

打開圖片上傳功能設置imageUpload: true

上傳圖片能夠設置具體支持圖片類型imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"]

圖片上傳調用路由設置imageUploadURL: "./api/document/upload"

後臺圖片保存服務器代碼（這裏用nodejs實現）：

router.post('/upload', function (req, res) { if (req.busboy) { req.busboy.on('file', function (fieldname, file, filename, encoding, mimetype) { var saveTo = path.join(__dirname, "../../", "build/src/" + filename); file.pipe(fs.createWriteStream(saveTo)); file.on('end', function () { var a = res; res.json({ success: true }); }); }); req.pipe(req.busboy); } })

node處理圖片上傳使用busboy插件

var busboy = require('connect-busboy');

控件中上傳圖片dialog源碼使用的表單上傳文件方式。（image-dialog.js）

var dialogContent = ((settings.imageUpload) ? "<form action=\"" + action + "\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">") + ((settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "") +
                    "<label>" + imageLang.url + "</label>" +
                    "<input type=\"text\" data-url />" + (function () { return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
                            "<input type=\"file\" name=\"" + classPrefix + "image-file\" accept=\"image/*\" />" +
                            "<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" +
                            "</div>" : ""; })() +
                    "<br/>" +
                    "<label>" + imageLang.alt + "</label>" +
                    "<input type=\"text\" value=\"" + selection + "\" data-alt />" +
                    "<br/>" +
                    "<label>" + imageLang.link + "</label>" +
                    "<input type=\"text\" value=\"http://\" data-link />" +
                    "<br/>" + ((settings.imageUpload) ? "</form>" : "</div>");

若是文件很差使，或者不適應表單上傳，咱們能夠更改上傳方式，

loading(true); var file = e.target.files[0]; var data = new FormData(); data.append('file', file); var request = { method: 'POST', // headers: {
    // 'Content-Type': 'multipart/form-data',
    // 'Accept': 'application/json'
    // },
 body: data }; fetch(action, request).then(res => { if (res.ok) return res; loading(false); }).then(res => { return res.responseString; }).then(res => { var a = res; loading(false); }).catch(e => { loading(false); console.log(e); })

注：後臺使用busboy的時候上傳文件時候不能設置媒體類型，否則後臺會直接在busboy中報錯。

以上爲editormd的使用以及圖片上傳方式實現，若是哪裏有寫的不清楚，或者建議感謝指正，謝謝。

原文出處：https://www.cnblogs.com/moran1992/p/10665523.html