为 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
,就大功告成了!
效果
部署好后,工具栏右上角就会多出三个按钮,然后就可以愉快的在全屏下写文章了~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- VS 2019 for Mac 第 3 个预览版发布,新编辑器、Xamarin 开发改进
- 文件预览 kkFileView v1.1 新增多媒体预览支持等
- 附件在线预览组件 WDA 1.2.6 发布,支持图片预览功能
- html中在线预览pdf文件之pdf在线预览插件
- 我做编辑器这些年:钉钉文档编辑器的前世今生
- 有爱编辑器 1.7.1 发布,mysql 编辑器 GUI
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
用户体验草图设计
比尔·巴克斯顿(Bill Buxton) / 黄峰 / 电子工业出版社 / 2009-11 / 168.00元
《用户体验草图设计:正确地设计,设计得正确(全彩)》:比尔·盖茨亲笔推荐版 人因国际、百度、华为、微软、腾讯用户体验部门联合推荐!一起来看看 《用户体验草图设计》 这本书的介绍吧!
HTML 编码/解码
HTML 编码/解码
RGB HSV 转换
RGB HSV 互转工具