乐趣区

给你的-Simplemde-Markdown-编辑器加上图片上传

最近自己在项目中使用到了 simplemde 这款 markdown 编辑器,实际使用过程中遇到了部分问题,记录在这里,希望对遇到同样问题的人有所帮助。

  • 问题 1:上传图片功能缺失。simplemde 这款 Markdown 编辑器没有上传图片功能
  • 问题 2:图标不能正常显示。simplemde 这款编辑器使用的是老版本的 fontAwesome 的图标样式(4. 的版本),会存在和新版本(5.)样式不兼容,无法正常显示的问题。

针对问题 1,simplemde 的作者明确表示不做图片上传功能,因为 Simplemde 只关注前端相关功能,而图片上传需要和后端交互。

还好在 issue 里面找到了一个能用上传图片的方法,InlineAttachment,这个库能够很方便的在 textarea 中粘贴图片实现上传效果,首先引入 inline-attachment.min.js 和 codemirror-4.inline-attachment.min.js 两个文件(具体的可以参考 InlineAttachment 官方文档 & Demo),具体参考配置如下:

var inlineAttachmentConfig = {
            uploadUrl: 'upload_image',               // 后端上传图片地址
            uploadFieldName: 'upload_file',          // 上传的文件名
            jsonFieldName: 'file_path',              // 返回结果中图片地址对应的字段名称
            progressText: '![图片上传中...]()',    // 上传过程中用户看到的文案
            errorText: '图片上传失败',
            urlText:'![图片描述]({filename})',    // 上传成功后插入编辑器中的文案,{filename} 会被替换成图片地址
            extraHeaders: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
            }
        };

        $(document).ready(function() {
            var editor = new SimpleMDE({element: $("#simple_editor")[0],
                autoDownloadFontAwesome: false,
                status: false,
                autofocus: true,
                placeholder: '请使用 Markdown 编写',
                status: false,
                styleSelectedText: false,
                spellChecker: false,
            });
            
            // 这里是 inlineAttachment 的调用配置
            inlineAttachment.editors.codemirror4.attach(editor.codemirror,\
            inlineAttachmentConfig);\
});

针对问题 2,自己想过降级 fontAwesome 的版本,但是感觉不太好,看了下 simplemde 里面的配置,是可以配置对应的 icon 的 className 的,所以就将没有办法正常显示的 标题 和 图片上传图标给改写了。

改写时主要要注意看下文档,文档中都有列出 action 对应的具体方法名称,自己对应着填充进去就好了。

toolbar: [{name:"heading", className:'fa fa-heading', action:SimpleMDE.toggleHeadingSmaller},
     {name:"image", className: 'fa fa-images', action: SimpleMDE.drawImage}
],

有课学是一站式课程返现 & 推荐平台,支持极客时间、慕课网、segmentFault、网易云课堂、udacity 等等主流平台。有课学,学好课,有所获!

退出移动版