为 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
,就大功告成了!
效果
部署好后,工具栏右上角就会多出三个按钮,然后就可以愉快的在全屏下写文章了~
参考资料
原文链接:https://acme.top/blog-feature-editor-md-add-btns
为 Editor.md 编辑器插件增加预览和发布按钮的更多相关文章
- 自己动手开发更好用的markdown编辑器-04(实时预览)
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/04/25/hexomd-04/ 程序打包 文章目录 1. 打开新窗口 ...
- 使用pdfjs插件在线预览PDF文件
前言 本文介绍在html中使用 pdfjs插件在线预览PDF文件的方法. 实现步骤 下载 pdfjs 并引入项目中 到PDFJS官网 http://mozilla.github.io/pdf.js/g ...
- ubuntu自带的gedit编辑器添加Markdown预览插件
gedit安装Markdown Preview Ubuntu自带的gedit编辑器也是有很强大的功能的,且支持插件的安装.对于喜欢用Markdown的我来说,这当然是很好的了,gedit本身 就支持M ...
- markown编辑器截图粘贴预览,并将图片传至七牛云
最近在做一个项目,需要实现类似QQ截图后,就是能够在富文本编辑器中粘贴截图并预览. 先看一下效果: 分析一下实现步骤: QQ截图后在编辑器中粘贴,肯定会有一个粘贴事件,即 paste 事件 在事件回调 ...
- PHP专业开发IDE——Zend Studio 10.5预览版发布
Zend Studio是新一代的PHP IDE,高效的开发和维护PHP代码是它的核心.Zend公司目前已发布了Zend Studio 10.5预览版,预览版中提高了快速响应能力和时时误差检查.因此使用 ...
- sql server 2014预览版发布
MSDN发布sql server2014预览版,如下图: SQL Server 2014新特性: 微软SQL Server部门主管Eron Kelly介绍,通过将交易处理放到内存中进行,新的SQL S ...
- vs2015下载及预览与发布
VS2015 RC发布下载,通用Windows平台必备神器! 几个月前微软发布了Visual Studio 2015的技术预览版本,之后又先后发布了6个更新版本.如今,微软已在其官方页面中公布了最新开 ...
- Window 7 平台的IE11浏览器预览版发布
继之前Windows 8.1 带来了IE11浏览器之后,今天Window 7 以及Windows Server 2008 R2平台的IE11浏览器预览版也已经发布. 当然这还只是一个开发者预览版,可能 ...
- UEditor百度富文本编辑器--preview在线预览时头部被挡住的解决方案
问题截图: 正常情况应该是如下显示: 解决方案: 1.打开ueditor/dialogs/preview/preview.html 2.找到body节点下面这一句 document.getElemen ...
随机推荐
- 前端开发在uc浏览器上遇到的坑
关于uc 的flex 和textarea 的width:100%: 这些天再做一个wap的项目,本想着手机上不用考虑兼容性问题,可以大刀阔斧搞,fuck ie678! 在pc上完成页面开发,在chro ...
- Python自动化测试 (八)unittest 单元测试
任何一种编程语言, 都会有单元测试框架, 本文介绍Python 自带的unittest模块 # -* - coding: UTF- -* - class Myclass: def sum(self,x ...
- XP系統IIS最大連接數修改
方法一: 安裝軟件 http://download.microsoft.com/download/iis50/Utility/5.0/NT45/EN-US/MtaEdt22.exe 然後進入 W3S ...
- 3013C语言_输入输出
第三章 输入输出 3.1输入输出概念及其实现 (1)数据从计算机内部向外部输出设备(如显示器.打印机等)输送的操作称为 “输出”,数据从计算机外部向输入设备(如键盘.鼠标.扫描仪等)送入的操作称为 “ ...
- vue 左右滑动效果
个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架 ...
- EasyTransaction主要源码分析
EasyTransaction是一个全功能的分布式事务框架,以下特性摘抄自其首页:https://github.com/QNJR-GROUP/EasyTransaction 一个框架包含多种事务形态, ...
- spring 5.x 系列第13篇 —— 整合RabbitMQ (xml配置方式)
源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 一.说明 1.1 项目结构说明 本用例关于rabbitmq的整合提供简单消 ...
- 使用事件注册器进行swoole代码封装
在使用swoole的时候,事件回调很难维护与编写,写起来很乱.特别在封装一些代码的时候,使用这种注册,先注册用户自己定义的,然后注册些默认的事件函数. Server.php class Server ...
- 【Spring源码解析】—— 策略模式在Spring中的应用
一. 什么是策略模式 策略模式的定义/含义:策略本身就是为了实现某一个目标而采取的一种工作方式,因此只要能够达成目标,则采取哪一种策略都可以:因此多种实际的策略之间是相互平行的. 注意 ...
- centos7搭建基于SAMBA的网络存储
学习目标: 通过本实验理解Linux系统下SAMBA服务器和客户端的配置,实现客户机可自动挂载服务端的共享存储. 操作步骤: 1. SAMBA服务器搭建 2. SAMBA客户端配置 参考命令: ...