editormd 上傳圖片問題解決

看這個(gè)就夠了！
http://editor.md.ipandao.com/examples/

一、下載源碼

首先在 editormd 官方下載源碼:

刪除 test、examples、docs 無用文件夾，重命名文件夾如下：

二、移入源碼到項(xiàng)目

這里，我把 plugins 文件夾單獨(dú)拎出來了。根據(jù)需要調(diào)整文件位置，只要 js css 文件在瀏覽器鏈接中可以訪問到就行。

在 IDEA 中右鍵 editormd、plugins 兩個(gè)文件夾 ，Marked directory as Exclusion，這樣兩個(gè)文件夾下的文件就可以在瀏覽器訪問了。

三、thymeleaf 頁面引用

test.html:

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />

    <title>測(cè)試文檔</title>

    <link rel="shortcut icon" href="favicon.ico">

    // 注意，thymeleaf 下，引用需要加 th: @{}
    <link rel="stylesheet" th:href="@{/css/style.css}" />
    <link rel="stylesheet" th:href="@{/css/editormd.css}" />

    <script th:inline="javascript">
        var testEditor;
        /*提交表單的js*/
        function contentCommit(comments){

            var docType = "3";
            var documentId = "123";
            var documentName = "測(cè)試文檔";

            var mdContent = $('#content').val();

            var content = {
                documentType:docType,
                documentId:documentId,
                documentName:documentName,
                content:mdContent,
                mdComment:comments
            };

            $.ajax({
                type:"POST",
                url: "./addText",
                contentType: "application/json",
                data: JSON.stringify(content),
                success: function(data){
                    if ("Y"==data.ifSuccess){
                        $.modal.alertWarning("保存成功！");
                    } else {
                        $.modal.alertWarning("保存失敗！");
                    }
                },
                error:function (data) {
                    $.modal.alertWarning("出錯(cuò)啦！請(qǐng)聯(lián)系管理員！");
                    return false;
                }
            });
        }

        // 編輯保存?zhèn)渥⑿畔?        function editComments() {
            var options = {
                title: '修改備注',
                width: "520",
                height: "360",
                url: ctx + "/editComments",
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero) {
            var body = layer.getChildFrame('body', index);
            var comments =  body.find('#description').val();
            contentCommit(comments);
            layer.close(index);
        }

        function selectChangeHistory(){

            var docType = "3";
            var documentId = "123";
            var documentName = "測(cè)試文檔";

            mdEditorForm.method = "post";
            // 提交至服務(wù)器的路徑
            mdEditorForm.action = "documentHistoryList"+"?redmineId="+redmineId+"&documentType="+docType+"&documentId="+documentId+"&documentName="+documentName;
            mdEditorForm.submit();
        }

        // 對(duì)encodeURI()編碼過的 URI 進(jìn)行解碼。
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "I");
            var r = window.location.search.substr(1).match(reg);

            if(r != null){
                return decodeURI(r[2]);
            }
            return "";//如果此處只寫return;則返回的是undefined
        };

        // 頁面加載時(shí)，數(shù)據(jù)初始化
        window.onload= function() {

            var text = [[${mdText}]];
            document.querySelector('.textArea').value =text;


            var canEdit = getQueryString('canEdit');
            testEditor = editormd("test-editormd", {
                width   : "90%",
                height  : 640,
                syncScrolling : "single",
                path    : "../lib/",
                readOnly: false,
                saveHTMLToTextarea : true,//注意：這個(gè)配置，方便post提交表單
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//支持接收的圖片上傳的格式
                imageUploadURL : "markdown/uploadImageFile", //你的controller里為上傳圖片所設(shè)計(jì)的路徑

                /**下述為新增，上面一行記得加逗號(hào)結(jié)束*/
                /*指定需要顯示的功能按鈕*/
                toolbarIcons : function() {
                    return ["undo", "redo", "|","bold", "italic","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","table","image","datetime","hr",  "||",  "watch", "fullscreen", "preview", "releaseIcon", "selectHistoryIcon","help"]
                },

                /*自定義功能按鈕*/
                toolbarIconTexts : {
                    releaseIcon : "<span bgcolor=\"gray\">發(fā)布</span>",
                    selectHistoryIcon : "<span bgcolor=\"red\">修改歷史</span>",
                },

                /*給自定義按鈕指定回調(diào)函數(shù)*/
                toolbarHandlers:{
                    releaseIcon : function(cm, icon, cursor, selection) {
                        // contentCommit();//提交表單代碼在下面

                        editComments();
                    },
                    selectHistoryIcon : function(cm, icon, cursor, selection) {
                        selectChangeHistory();// 查詢文檔修改歷史
                    },
                },
                onload:function(){
                    if ("true" != canEdit || null== canEdit){// 禁止編輯 markdown
                        $('#test-editormd [name="preview"]').click();
                        $('#test-editormd .editormd-preview-close-btn').hide()
                    }else {
                        $('#test-editormd [name="preview"]').click();
                    }

                }
            });

            // 對(duì)escape()編碼的字符串進(jìn)行解碼
            function getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "I");
                var r = window.location.search.substr(1).match(reg);
                if(r != null){
                    return unescape(r[2]);
                }
                return null;//如果此處只寫return;則返回的是undefined
            };


        }
    </script>
</head>
<body>
<div id="layout">
    <header>
        <h1>更新驗(yàn)證規(guī)范</h1>
    </header>

    <form name="mdEditorForm" target="_blank">
        <div id="test-editormd">
            <textarea name="content" id="content" style="display:none;" class="textArea"> </textarea>
        </div>
    </form>

</div>
<script th:src="@{/js/jquery.min.js}"></script>

// 注意，thymeleaf 下，引用需要加 th: @{}
<script th:src="@{/editormd/editormd.min.js}"></script>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>

<script th:block th:include="include :: footer" />
</body>
</html>
四、controller 后端接口
@Controller
public class MdImageUploadController {

    @Autowired
    private ServerConfig serverConfig;

    @RequestMapping(value = "/markdown/uploadImageFile", method = RequestMethod.POST)
    @ResponseBody
    public String uploadFile(HttpServletRequest request, HttpServletResponse response,
                                 @RequestParam(value = "editormd-image-file", required = false) MultipartFile attach){

        JSONObject jsonObject=new JSONObject();
        if (!attach.isEmpty())
        {
            try {
                String imgUrl = MdFileUploadUtils.upload(Global.getMarkdownImagesPath(), attach);

                String url = serverConfig.getUrl() + imgUrl;

                jsonObject.put("success", 1);
                jsonObject.put("message", "上傳成功");
                jsonObject.put("url", url);
            } catch (Exception e) {
                jsonObject.put("success", 0);
            }
        }
        jsonObject.put("success", 0);
        jsonObject.put("message", "上傳圖片異常，請(qǐng)聯(lián)系管理員");
        return jsonObject.toString();
    }
}

圖片上傳成功后，返回 json 字符串，前端 js 不需要回調(diào)處理，但是 json 字符串一定要按照如下格式。

Editor.md 期待的返回:

{
  'success(1表示成功,0表示失敗)': 1(或0),
  'message': 'message',
  'url(如果失敗則不返回)': 'imageURL'
}
五、上傳圖片成功后回調(diào)

調(diào)試中，遇到問題，圖片上傳成功后，沒能在輸入框展示圖片鏈接，修改了 js 文件后，問題解決。

上傳成功后：

六、md 編輯頁面工具類按鈕

可以根據(jù)自己需要，自定義功能按鈕：

/**下述為新增，上面一行記得加逗號(hào)結(jié)束*/
/*指定需要顯示的功能按鈕*/
toolbarIcons : function() {
    return ["undo", "redo", "|","bold", "italic","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","table","image","datetime","hr",  "||",  "watch", "fullscreen", "preview", "releaseIcon", "selectHistoryIcon","help"]
    // return editormd.toolbarModes['simple']; // full, simple, mini
},

full:["undo","redo","|","bold","del","italic","quote","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","link","reference-link","image","code","preformatted-text","code-block","table","datetime","emoji","html-entities","pagebreak","|","goto-line","watch","preview","fullscreen","clear","search","|","help","info"],
simple:["undo","redo","|","bold","del","italic","quote","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","watch","preview","fullscreen","|","help","info"],
mini:["undo","redo","|","watch","preview","|","help","info"]

參考：

  1. 看這個(gè)就夠了：http://editor.md.ipandao.com/examples/

  2. 使用 Editor.md 圖片上傳出現(xiàn)的問題及解決思路

  3. Editor.md

  4. editor.md 官方地址

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容