Simplemde 編輯器相關問題小記

曉鶴發表於2019-07-27

最近自己在專案中使用到了 simplemde 這款 markdown 編輯器，實際使用過程中遇到了部分問題，記錄在這裡，希望對遇到同樣問題的人有所幫助。peace & love。

  • 問題 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}
                ],
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章