editor.md 本地图片上传配置和自定义上传文件_小白的日常记录，小白博客，php博客，个人博客，技术博客，个人随笔记录，【小白】随笔记录

editor.md 本地图片上传配置和自定义上传文件

19-08-21 14:45 杂七杂八小白 editormd

`editor.md`上篇只是说了安装使用，但是在使用上传图片得时候只是显示远程连接的，下面介绍下上传本地图片得相关配置和自定义上传回调处理

#### 使用 editor.md 自带的上传图片配置
```js
var myEditormd;

$(function(){
    myEditormd = editormd("md_editor", {
        // width  : "100%",
        height    : "550px",
        path      : JS_ROOT + "/editormd/lib/",
        emoji     : false,      // emoji表情，默认关闭
        taskList  : true,
        tocm      : true,       // 使用 [TOCM]
        tex       : true,       // 开启科学公式TeX语言支持，默认关闭
        flowChart : true,       // 开启流程图支持，默认关闭
        sequenceDiagram: true,  // 开启时序/序列图支持，默认关闭
        imageUpload : true,
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL : "uploadfile",  // 后端接收路径
    });
});
```

#### 自定义上传文件
```js
$(function(){
    myEditormd = editormd("md_editor", {
        // width  : "100%",
        height    : "550px",
        path      : JS_ROOT + "/editormd/lib/",
        emoji     : false,      // emoji表情，默认关闭
        taskList  : true,
        tocm      : true,       // 使用 [TOCM]
        tex       : true,       // 开启科学公式TeX语言支持，默认关闭
        flowChart : true,       // 开启流程图支持，默认关闭
        sequenceDiagram: true,  // 开启时序/序列图支持，默认关闭,
        // 自定义工具栏按钮
        toolbarIcons: function() {
            return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "imageOne", "code", "code-block", "table", "datetime", "html-entities", "pagebreak", "|", "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|", "help", "info"]
        },
        toolbarIconsClass : {
            imageOne : "fa-image"  // 指定一个FontAawsome的图标类
        },
        // 自定义工具栏按钮的事件处理
        toolbarHandlers : {
            /**
             * @param {Object}      cm         CodeMirror对象
             * @param {Object}      icon       图标按钮jQuery元素对象
             * @param {Object}      cursor     CodeMirror的光标对象，可获取光标所在行和位置
             * @param {String}      selection  编辑器选中的文本
             */
            imageOne : function(cm, icon, cursor, selection) {
                flashupload('md单个图片上传', 'mdThumbs', one_images_md, '1,baseImage');
            },
        },
        lang : {
            toolbar : {
                imageOne : "上传单个图片",  // 自定义按钮的提示文本，即title属性
            }
        },
    });
});

// 回调方法处理
function one_images_md(index, returnid)
{
    // 取得iframe对象
    var body = layer.getChildFrame('body', index);
    // 取得选择的图片
    var in_content = body.find("#att-status").html().substring(1);
    var img_name   = body.find("#att-name").html().substring(5);
    if (in_content == '') {
        layer.msg('请上传图片');
        return false;
    }
    
    var cm     = myEditormd;        // myEditormd是用editormd函数创建的编辑器对象，这里myEditormd是全局变量
    var cursor = cm.getCursor();    // 获取光标位置
    var alt    = img_name;
    // 以下是对图片上传结果的处理，引用原image-upload插件的代码
    var altAttr = (alt !== "") ? " \"" + alt + "\"" : "";
    cm.replaceSelection("![" + alt + "](" + in_content + altAttr + ")");
    if (alt === "") {
        cm.setCursor(cursor.line, cursor.ch + 2);
    }
    
    layer.close(index);
}
```
其他支出拖拽上传可参考：<a href="https://blog.csdn.net/chunyuan314/article/details/81022498" target="_blank">https://blog.csdn.net/chunyuan314/article/details/81022498</a>

本文为原创文章，转载无需和我联系，但请注明来自：http://www.baiyongj.com/news/511.html

上一篇：由 UEditor 编辑器替换成支持 Markdown 的 editor.md 编辑器

下一篇：上传图片同步到又拍云存储

editor.md 本地图片上传配置和自定义上传文件

推荐文章

热门文章

editor.md 本地图片上传配置 和 自定义上传文件

推荐文章

热门文章

editor.md 本地图片上传配置和自定义上传文件