Home
Linux
Golang
MySQL
PHP
Other
Message
开源 Markdown 编辑器 Editor.md
创建日期:2019-09-10 18:07:28
更新日期:2020-10-24 01:32:06
栏目:
Other
浏览:1264
## 开源 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(""); } 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地址,上传成功时才返回
内容版权声明:本文为舒孝元原创文章,转载无需和我联系,但请注明来自
舒孝元博客:https://www.shuxiaoyuan.com/info/32
联系邮箱:sxy@shuxiaoyuan.com