Markdown編輯器Editor.md使用方式

時間 2019-12-06

標籤 markdown 編輯器 editor.md editor 使用方式欄目 Markdown 简体版

原文原文鏈接

摘要：html

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

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

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

文件上傳頁面配置：github

dom部分：web

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

腳本部分（上傳功能）：json

    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();

展現文章頁面配置：api

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);
})