Preface

The Editor.md plug-in has been used as the editor of the blog, which is very good. However, when editing in full screen, you can click the button only when you want to preview or save it in the non full screen state. It's uncomfortable to use it, so it took a little time to add three buttons on the toolbar, preview, save and publish. Here, record the process of modification.

Development

Find the static resource file according to "editor Settings > editor static resource address" in Editor.md settings. My blog is placed in the assets folder under wordpress root directory, modify the file / assets/Config/editormd.js, and add the following content:

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")){
+    // Preview Changes
+    toolBar.push('||', 'postPreview');
+    // Save Draft
+    if($("#save-post").size() == 1){
+        toolBar.push('postSaveDraft');
+    }
+    // Release / update
+    toolBar.push('postSave');
+
+    toolbarHandlers = {
+        /**
+         * @param {Object} cm          CodeMirror object
+         * @param {Object} icon        Icon button jQuery element object
+         * @param {Object} cursor      CodeMirror Cursor object to get the line and position of the cursor
+         * @param {String} selection   Editor selected text
+         */
+        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("Are you sure?" + postSaveText + "Article?")){
+                $("#publish").click();
+            }
+        },
+    };
+}

var wpEditormd = editormd({
    id: textareaID,
    path: editor.editormdUrl + '/assets/Editormd/lib/',
    width: '100%', //Editor width
    height: textareaID === 'wp-content-editor-container' ? 640 : 320,    //Editor height
    syncScrolling: editor.syncScrolling !== 'off', //That is, whether to turn on synchronous scrolling Preview
    // ........
    // Other code
    // .......
    onload: function () {
        //Load complete execution
        if ( textareaID === 'comment' ) {
            //Modify comment form 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 resolution delete editor edit blank margins
            var codeMirror = $('.editormd .CodeMirror.CodeMirror-wrap');
            var codeMirrorMarginTop = codeMirror.css('margin-top');
            codeMirror.css('margin-top',parseInt(codeMirrorMarginTop) - 32 + "px");
        }
    },
+    toolbarIconsClass: {
+        // Specify an icon class for FontAawsome
+        postPreview: "fa-chrome",
+        postSaveDraft: "fa-floppy-o",
+        postSave: "fa-paper-plane",
+    },
+    lang: {
+        toolbar: {
+            postPreview: "Preview Changes",
+            postSaveDraft: "Save Draft",
+            postSave: postSaveText,
+        }
+    },
+    // Event handling of custom toolbar buttons
+    toolbarHandlers: toolbarHandlers
});

compress

Compress the code after writing, and then replace editormd.min.js under the directory of the same level, and it's done!

Effect

After deployment, there will be three more buttons in the upper right corner of the toolbar, and then you can write the article in full screen happily.~

Reference material

editor.md official website
editor.md custom toolbar

Original link: https://acme.top/blog-feature-editor-md-add-btns