舒孝元博客

## 开源 Markdown 编辑器Editor.md：

[点击直达官网链接](https://pandao.github.io/editor.md/ "官网")

这个还是很好用的，还方便移植，本页面就是采用 Markdown 编辑器编写的

直接去官网下载下来，然后再项目中引入 css js 等就可以了，这里主要说明两个功能

### 一、开启内置的键盘快捷键
这个其实官网有介绍，这里简单说明下，看代码说话，应该比较简单

```javascript
//开启内置的键盘快捷键
var keyMap = {
    "Ctrl-S": function (cm) {
        alert("Ctrl+S");
		//这里处理你的逻辑，一般是ajax发送数据保存
    },
    "Ctrl-A": function (cm) {
        // alert("Ctrl+A");
        cm.execCommand("selectAll");
    }
};

// 可以设置多个
var keyMap2 = {
      "Ctrl-T": function(cm) {
        alert("Ctrl+T");
      }
};

this.addKeyMap(keyMap);
this.addKeyMap(keyMap2);
this.removeKeyMap(keyMap2);  // remove signle key

```

> 注：当然也可以用原生的JS代码进行判断，以下给出示例 demo

```
document.onkeydown = function (event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];
    // e.ctrlKey 判断ctrl键是否按下，可以自己试试每一个键对应的10进制数字是多少
    if (e && e.ctrlKey && e.keyCode == 83) {  //ctrl + s 保存
        //这里去做相应的事情，比如Ajax请求接口实现保存功能

return false;//禁用浏览器的保存网页功能
    }
};
```

### 二、支持剪切板图片上传
这个官网没有说明，原生的上传感觉还是不高效和方便，这里直接采用 `ctrl + v` 上传图片
具体实现如下：

1. 一般下载官网的代码后，有个 plugins 目录，在 plugins 目录中添加一个目录 image-handle-paste ，在该目录下添加一个image-handle-paste.js文件，写入如下内容，感兴趣的可以看看里面的代码逻辑

```javascript
/*!
 * editormd图片粘贴上传插件
 *
 * @file   image-handle-paste.js
 * @author codehui
 * @date   2018-11-07
 * @link   https://www.codehui.net
 */
(function () {
    var factory = function (exports) {
        var $ = jQuery;           // if using module loader(Require.js/Sea.js).
        var pluginName = "image-handle-paste";  // 定义插件名称
        //图片粘贴上传方法
        exports.fn.imagePaste = function () {
            var _this = this;
            var cm = _this.cm;
            var settings = _this.settings;
            var editor = _this.editor;
            var classPrefix = _this.classPrefix;
            var id = _this.id;
            if (!settings.imageUpload || !settings.imageUploadURL) {
                console.log('你还未开启图片上传或者没有配置上传地址');
                return false;
            }
            //监听粘贴板事件
            $('#' + id).on('paste', function (e) {
                var items = (e.clipboardData || e.originalEvent.clipboardData).items;
                //判断图片类型
                if (items && items[0].type.indexOf('image') > -1) {
                    var file = items[0].getAsFile();
                    /*生成blob
                    var blobImg = URL.createObjectURL(file);
                    */
                    /*base64
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        var base64Img = e.target.result //图片的base64
                    }
                    */
                    // 创建FormData对象进行ajax上传
                    var forms = new FormData(document.forms[0]); //Filename
                    forms.append(classPrefix + "image-file", file, "file_" + Date.parse(new Date()) + ".png"); // 文件
                    _this.executePlugin("imageDialog", "image-dialog/image-dialog");
                    _ajax(settings.imageUploadURL, forms, function (ret) {
                        if (ret.success == 1) {
                            $("." + classPrefix + "image-dialog").find("input[data-url]").val(ret.url);
                            //cm.replaceSelection("![](" + ret.url  + ")");
                        }
                        console.log(ret.message);
                    })
                }
            })
        };
        // ajax上传图片 可自行处理
        var _ajax = function (url, data, callback) {
            $.ajax({
                "type": 'post',
                "cache": false,
                "url": url,
                "data": data,
                "dateType": "json",
                "processData": false,
                "contentType": false,
                "mimeType": "multipart/form-data",
                success: function (ret) {
                    callback(JSON.parse(ret));
                },
                error: function (err) {
                    console.log('请求失败')
                }
            })
        }
    };
    // CommonJS/Node.js
    if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
        module.exports = factory;
    } else if (typeof define === "function")  // AMD/CMD/Sea.js
    {
        if (define.amd) { // for Require.js
            define(["editormd"], function (editormd) {
                factory(editormd);
            });
        } else { // for Sea.js
            define(function (require) {
                var editormd = require("./../../editormd");
                factory(editormd);
            });
        }
    } else {
        factory(window.editormd);
    }
})();
```
1. 在编辑页面的 `<script> </script>` 添加如下内容

```
imageUpload: true, //开启图片上传
imageUploadURL: '/book/updateImg', //图片上传后台地址
onload: function () {
	// 引入editormd图片粘贴上传插件，执行监听方法
	editormd.loadPlugin("/editor/plugins/image-handle-paste/image-handle-paste", function () {
	testEditor.imagePaste();
});
```

后台返回 json 数据格式，格式如下

'success' => 1,// 0 表示上传失败，1 表示上传成功
	'message' => '保存成功',//提示的信息，上传成功或上传失败及错误信息等。
	'url'     => 'xxxxxx/img/xxx.png', // 图片的URL地址，上传成功时才返回

开源 Markdown 编辑器 Editor.md