1. IT分享知识网首页

editormd 上传图片问题解决

老牧童 • • 未分类 • 阅读 64

editormd 上传图片问题解决一、下载源码首先在editormd官方下载源码:删除test、examples、docs无用文件夹，重命名文件夹如下：二、移入源码到项目这里，我把plugins文件夹单独拎出来了。根据需要调整文件位置，只要jscss文件在浏览器链接中可以访问到就行。在IDEA中右键editormd、plugins两个文件夹，MarkeddirectoryasExclusion，这样两个文件夹下的文件就可以在浏览器访问了。三、thymeleaf页面引用test.htm

大家好，欢迎来到IT知识分享网。

一、下载源码

首先在 editormd 官方下载源码:

editormd 上传图片问题解决

删除 test、examples、docs 无用文件夹，重命名文件夹如下：

editormd 上传图片问题解决

二、移入源码到项目

editormd 上传图片问题解决

这里，我把 plugins 文件夹单独拎出来了。根据需要调整文件位置，只要 js css 文件在浏览器链接中可以访问到就行。

在 IDEA 中右键 editormd、plugins 两个文件夹 ，Marked directory as Exclusion，这样两个文件夹下的文件就可以在浏览器访问了。

三、thymeleaf 页面引用

test.html:

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

    <title>测试文档</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 = "测试文档";

            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("出错啦！请联系管理员！");
                    return false;
                }
            });
        }

        // 编辑保存备注信息
        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 = "测试文档";

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

        // 对encodeURI()编码过的 URI 进行解码。
        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
        };

        // 页面加载时，数据初始化
        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,//注意：这个配置，方便post提交表单
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//支持接收的图片上传的格式
                imageUploadURL : "markdown/uploadImageFile", //你的controller里为上传图片所设计的路径

                /**下述为新增，上面一行记得加逗号结束*/
                /*指定需要显示的功能按钮*/
                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\">发布</span>",
                    selectHistoryIcon : "<span bgcolor=\"red\">修改历史</span>",
                },

                /*给自定义按钮指定回调函数*/
                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();
                    }

                }
            });

            // 对escape()编码的字符串进行解码
            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>更新验证规范</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", "上传图片异常，请联系管理员");
        return jsonObject.toString();
    }
}

图片上传成功后，返回 json 字符串，前端 js 不需要回调处理，但是 json 字符串一定要按照如下格式。

Editor.md 期待的返回:

{
  'success(1表示成功,0表示失败)': 1(或0),
  'message': 'message',
  'url(如果失败则不返回)': 'imageURL'
}
五、上传图片成功后回调

调试中，遇到问题，图片上传成功后，没能在输入框展示图片链接，修改了 js 文件后，问题解决。

editormd 上传图片问题解决

上传成功后：

editormd 上传图片问题解决

editormd 上传图片问题解决

六、md 编辑页面工具类按钮

可以根据自己需要，自定义功能按钮：

/**下述为新增，上面一行记得加逗号结束*/
/*指定需要显示的功能按钮*/
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. 使用 Editor.md 图片上传出现的问题及解决思路
  2. Editor.md
  3. editor.md 官方地址

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/22590.html

赞 (0)
老牧童老牧童
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信