为 Editor.md 编辑器插件增加预览和发布按钮

栏目: JavaScript · 发布时间: 5年前

内容简介:一直在使用 Editor.md 插件作为博客的编辑器,用着挺好,但是在全屏下编辑时,每次想预览或者保存又必须切换到非全屏状态下才可以点击按钮,用着不舒服,所以花了一点时间在工具栏上增加了预览、保存、发布三个按钮,在此记录一下修改的过程。根据 Editor.md 设置中的 "编辑器设置 > 编辑器静态资源地址" 找到静态资源文件,我的博客是放在了 wordpress 根目录下的将编写好后的代码压缩,然后替换掉同级目录下的

一直在使用 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")){
+    // 预览更改
+    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 编辑器插件增加预览和发布按钮

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

产品经理全栈运营实战笔记

产品经理全栈运营实战笔记

林俊宇 / 化学工业出版社 / 49.8元

本书凝结作者多年的产品运营经验,读者会看到很多创业公司做运营的经验,书中列举了几十个互联网产品的运营案例去解析如何真正做好一个产品的冷启动到发展期再到平稳期。本书主要分为六篇:互联网运营的全面貌;我的运营生涯;后产品时代的运营之道;揭秘刷屏事件的背后运营;技能学习;深度思考。本书有很多关于产品运营的基础知识,会帮助你做好、做透。而且将理论和作者自己的案例以及其他人的运营案例结合起来,会让读者更容易......一起来看看 《产品经理全栈运营实战笔记》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具