嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

周梦康 发表于 2017-03-14 5530 次浏览 标签 : javascriptmditor

免费领取阿里云优惠券 我的直播 - 《PHP 进阶之路》

最近在使用 mditor 。同事弄的一个 markdown 编辑器,所以遇到问题也好解决。主页地址 https://github.com/Houfeng/mditor

这段时间就是少了图片的击触上传、粘贴上传、拖拽上传。然后参考别的代码实现了下。

var mditor = Mditor.fromTextarea(document.getElementById("markdown-textarea"));
mditor.on('ready', function () {
    mditor.height = '550px';
    var helpBtn = mditor.toolbar.getItem("help");
    helpBtn.handler = function () {
        window.open('https://yq.aliyun.com/help/markdown', '_blank');
    };
    var imgBtn = mditor.toolbar.getItem('image');

    var upload = function (file) {
        if (file == null) {
            return;
        }
        var name = file.name || 'screenshot.png';
        name = name.replace(/\.(?:jpg|gif|png)$/i, ''); // clear ext
        name = name.replace(/\W+/g, '_'); // clear unvalid chars

        var data = new FormData();
        data.append('fileToUpload', file, name);
        $.ajax('/upload/img', {
                    data: data,
                    type: 'POST',
                    processData: false,
                    contentType: false
                })
                .done(function (res) {
                    mditor.editor.insertBeforeText('![' + name + '](' + res + ")\n");
                })
                .fail(function ($xhr) {
                    if ($xhr.responseText) {
                        $.alert($xhr.responseText);
                    }
                });
    };

    imgBtn.handler = function () {
        var accept = {
            image: 'image/png, image/gif, image/jpg, image/jpeg',
        };
        var $file = $('<input type="file" accept="' + accept.image + '">');
        $file.click();
        $file.on('change', function () {
            var file = this.files[0];
            upload(file);
        });
    };

    mditor.editor.on('paste',function(evt){
        var data = evt.clipboardData;
        if (typeof data !== 'object') {
            return;
        }

        return $.each(data.items, function(i, item) {
            if (item.kind === 'file' && item.type.indexOf('image/') !== -1) {
                var blob = item.getAsFile();
                upload(blob);
            }
        });
    });
    mditor.editor.on('drop',function(evt){
        evt.preventDefault();
        return $.each(evt.dataTransfer.files, function(i, file) {
            return upload(file);
        });
    });
});

safari 下粘贴上传有兼容性问题,拖拽 chrome 和 safari 下都正常。

嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

评论列表

回复 路人甲 2017-04-25 07:49:26
楼主你好,最近也遇到同样的问题,请问下你的后台是怎么写的?方便的话把代码贴出来,谢谢!