首页手记实现houjs中markdown编辑器（SimpleM...

实现houjs中markdown编辑器（SimpleMDE）本地上传功能

标签：

JavaScript 前端工具

大家知道houjs默认markdown编辑器使用的是著名开源扩展SimpleMDE，而SimpleMDE是没有上传功能的，我们使用houjs的上传组件dmUploader来实现SimpleMDE本地上传功能。

DEMO：你可以看下本学习社群社区发帖功能，就是使用本帖的方案。

该方案的逻辑不单单是图片上传，当你想在SimpleMDE外箱SimpleMDE编辑器内输入内容时，此方案都有效。接下来我们实战代码。

实例化SimpleMDE编辑器

<textarea id="#editor"></textarea>
var simplemde = new SimpleMDE({
    element: $("#editor")[0],
    indentWithTabs: false,
    tabSize: 4,
    status: false,
    autosave: {
        enabled: false
    },
    spellChecker: false,
    renderingConfig: {
        codeSyntaxHighlighting: true
    }
});

这段代码并没有什么特别的地方，就是将一个textarea文本域实例化成了SimpleMDE对象。

处理上传

接下来我们做上传，先放了一个链接，当点击此连接后则开始选择文件上传，具体上传的功能可以参考对应的houjs模块。

$('#Form').dmUploader({ //
    url: "//",
    maxFileSize: 3000000, // 3 Megs max
    multiple: false,
    allowedTypes: 'image/*',
    extFilter: ['jpg','jpeg','png'],
    onUploadSuccess: function(id, data){
        if(data.status === 'ok'){
            simplemde.codemirror.replaceSelection("![](/uploads/"+data.path+")")
        }else{
            modal.alert(data.message);
        }
    }
});

重点就在于onUploadSuccess回调函数，当上传成功后我们调用 simplemde.codemirror.replaceSelection()方法，将内容替换SimpleMDE编辑器内鼠标所选择的区域，如果没有选择就是鼠标所在。

大功告成，下面的图就是本地上传的。