继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

实现houjs中markdown编辑器(SimpleMDE)本地上传功能

abei2017
关注TA
已关注
手记 33
粉丝 1万
获赞 234

大家知道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编辑器内鼠标所选择的区域,如果没有选择就是鼠标所在。

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

图片描述

打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP