為 Editor.md 編輯器插件增加預覽和發布按鈕

前言

一直在使用 Editor.md 插件作為博客的編輯器，用着挺好，但是在全屏下編輯時，每次想預覽或者保存又必須切換到非全屏狀態下才可以點擊按鈕，用着不舒服，所以花了一點時間在工具欄上增加了預覽、保存、發布三個按鈕，在此記錄一下修改的過程。

開發

根據 Editor.md 設置中的 "編輯器設置 > 編輯器靜態資源地址" 找到靜態資源文件，我的博客是放在了 wordpress 根目錄下的 assets 文件夾下，修改文件 /assets/Config/editormd.js，增加內容如下：

var toolBar;
switch (textareaID) {
    case 'wp-content-editor-container' :
        toolBar = fullToolBar;
        break;
    case 'comment' :
        toolBar = simpleToolBar;
        break;
    case 'wp-replycontent-editor-container' :
        toolBar = miniToolBar;
        break;
}

+var postSaveText = $("#publish").val();
+var toolbarHandlers = {};

+if($("body").hasClass("wp-admin") && ($("body").hasClass("post-type-post") || $("body").hasClass("post-type-page")){
+    // 預覽更改
+    toolBar.push('||', 'postPreview');
+    // 保存草稿
+    if($("#save-post").size() == 1){
+        toolBar.push('postSaveDraft');
+    }
+    // 發布/更新
+    toolBar.push('postSave');
+
+    toolbarHandlers = {
+        /**
+         * @param {Object}	cm			CodeMirror對象
+         * @param {Object}	icon		圖標按鈕jQuery元素對象
+         * @param {Object}	cursor		CodeMirror的光標對象，可獲取光標所在行和位置
+         * @param {String}	selection	編輯器選中的文本
+         */
+        postPreview: function(cm, icon, cursor, selection){
+            $("#post-preview").click();
+        },
+        postSaveDraft: function(cm, icon, cursor, selection){
+            $("#save-post").click();
+        },
+        postSave: function(cm, icon, cursor, selection){
+            if($("#publish").attr("name") == "save"){
+                $("#publish").click();
+            }else if(confirm("您確定要" + postSaveText + "文章嗎？")){
+                $("#publish").click();
+            }
+        },
+    };
+}

var wpEditormd = editormd({
    id: textareaID,
    path: editor.editormdUrl + '/assets/Editormd/lib/',
    width: '100%', //編輯器寬度
    height: textareaID === 'wp-content-editor-container' ? 640 : 320,    //編輯器高度
    syncScrolling: editor.syncScrolling !== 'off', //即是否開啟同步滾動預覽
	// ........
	// 其他代碼
	// .......
    onload: function () {
        //加載完成執行
        if ( textareaID === 'comment' ) {
            //修改評論表單name
            $('textarea.editormd-markdown-textarea').attr('name', 'comment');
        }

        if ( textareaID === 'wp-replycontent-editor-container' ) {
            $('.reply').click(function () {
                setTimeout(function () {
                    $('.edit-comments-php .CodeMirror.cm-s-default.CodeMirror-wrap').css('margin-top',$('.editormd-toolbar').height());
                },100);
            })
        }

        if (getWidth() === 1600) {
            // 1600分辨率刪除編輯器編輯空白外邊距
            var codeMirror = $('.editormd .CodeMirror.CodeMirror-wrap');
            var codeMirrorMarginTop = codeMirror.css('margin-top');
            codeMirror.css('margin-top',parseInt(codeMirrorMarginTop) - 32 + "px");
        }
    },
+    toolbarIconsClass: {
+        // 指定一個FontAawsome的圖標類
+        postPreview: "fa-chrome",
+        postSaveDraft: "fa-floppy-o",
+        postSave: "fa-paper-plane",
+    },
+    lang: {
+        toolbar: {
+            postPreview: "預覽更改",
+            postSaveDraft: "保存草稿",
+            postSave: postSaveText,
+        }
+    },
+    // 自定義工具欄按鈕的事件處理
+    toolbarHandlers: toolbarHandlers
});

壓縮

將編寫好后的代碼壓縮，然后替換掉同級目錄下的 editormd.min.js，就大功告成了！

效果

部署好后，工具欄右上角就會多出三個按鈕，然后就可以愉快的在全屏下寫文章了~

參考資料

editor.md 官網
editor.md 自定義工具欄

原文鏈接：https://acme.top/blog-feature-editor-md-add-btns