没有使用过Editor.md的朋友请移步 https://github.com/pandao/editor.md

插件使用方法:使用截图工具截图保存之后,在编辑器里面粘贴/(ctrl+v)就可以实现自动上传图片了。

1. 创建插件文件

plugins目录下创建 image-handle-paste/image-handle-paste.js文件。

2. 插件的内容

这个方法里面是将粘贴板的图片添加到一个FormData里面,然后使用ajax进行提交上传的,上传完成调编辑器自带的图片dialog进行插入。里面预留了blob对象和base64格式的图片方法,根据自己需求自取。

  1. /*!
  2. * editormd图片粘贴上传插件
  3. *
  4. * @file image-handle-paste.js
  5. * @author codehui
  6. * @date 2018-11-07
  7. * @link https://www.codehui.net
  8. */
  9. (function() {
  10. var factory = function (exports) {
  11. var $ = jQuery; // if using module loader(Require.js/Sea.js).
  12. var pluginName = "image-handle-paste"; // 定义插件名称
  13. //图片粘贴上传方法
  14. exports.fn.imagePaste = function() {
  15. var _this = this;
  16. var cm = _this.cm;
  17. var settings = _this.settings;
  18. var editor = _this.editor;
  19. var classPrefix = _this.classPrefix;
  20. var id = _this.id;
  21. if(!settings.imageUpload || !settings.imageUploadURL){
  22. console.log('你还未开启图片上传或者没有配置上传地址');
  23. return false;
  24. }
  25. //监听粘贴板事件
  26. $('#' + id).on('paste', function (e) {
  27. var items = (e.clipboardData || e.originalEvent.clipboardData).items;
  28. //判断图片类型
  29. if (items && items[0].type.indexOf('image') > -1) {
  30. var file = items[0].getAsFile();
  31. /*生成blob
  32. var blobImg = URL.createObjectURL(file);
  33. */
  34. /*base64
  35. var reader = new FileReader();
  36. reader.readAsDataURL(file);
  37. reader.onload = function (e) {
  38. var base64Img = e.target.result //图片的base64
  39. }
  40. */
  41. // 创建FormData对象进行ajax上传
  42. var forms = new FormData(document.forms[0]); //Filename
  43. forms.append(classPrefix + "image-file", file, "file_"+Date.parse(new Date())+".png"); // 文件
  44. _this.executePlugin("imageDialog", "image-dialog/image-dialog");
  45. _ajax(settings.imageUploadURL, forms, function(ret){
  46. if(ret.success == 1){
  47. $("." + classPrefix + "image-dialog").find("input[data-url]").val(ret.url);
  48. //cm.replaceSelection("![](" + ret.url + ")");
  49. }
  50. console.log(ret.message);
  51. })
  52. }
  53. })
  54. };
  55. // ajax上传图片 可自行处理
  56. var _ajax = function(url, data, callback) {
  57. $.ajax({
  58. "type": 'post',
  59. "cache": false,
  60. "url": url,
  61. "data": data,
  62. "dateType": "json",
  63. "processData": false,
  64. "contentType": false,
  65. "mimeType": "multipart/form-data",
  66. success: function(ret){
  67. callback(JSON.parse(ret));
  68. },
  69. error: function (err){
  70. console.log('请求失败')
  71. }
  72. })
  73. }
  74. };
  75. // CommonJS/Node.js
  76. if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
  77. {
  78. module.exports = factory;
  79. }
  80. else if (typeof define === "function") // AMD/CMD/Sea.js
  81. {
  82. if (define.amd) { // for Require.js
  83. define(["editormd"], function(editormd) {
  84. factory(editormd);
  85. });
  86. } else { // for Sea.js
  87. define(function(require) {
  88. var editormd = require("./../../editormd");
  89. factory(editormd);
  90. });
  91. }
  92. }
  93. else
  94. {
  95. factory(window.editormd);
  96. }
  97. })();

后端接收file方法为$_FILES['editormd-image-file']

默认返回数据格式(修改_ajax方法回调即可)

  1. {
  2. success : 0 | 1, // 0 表示上传失败,1 表示上传成功
  3. message : "提示的信息,上传成功或上传失败及错误信息等。",
  4. url : "图片地址" // 上传成功时才返回
  5. }

3. 页面引用插件

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>editormd图片粘贴上传插件</title>
  6. <link rel="stylesheet" href="../css/editormd.css" />
  7. </head>
  8. <body>
  9. <div id="test-editormd">
  10. <textarea style="display:none;"></textarea>
  11. </div>
  12. <script src="js/jquery.min.js"></script>
  13. <script src="../editormd.js"></script>
  14. <script type="text/javascript">
  15. var testEditor = editormd("test-editormd", {
  16. path: '../lib/',
  17. imageUpload: true, //开启图片上传
  18. imageUploadURL: '/logic/upload', //图片上传后台地址
  19. onload: function() {
  20. // 引入插件 执行监听方法
  21. editormd.loadPlugin("../plugins/image-handle-paste/image-handle-paste", function(){
  22. testEditor.imagePaste();
  23. });
  24. }
  25. });
  26. </script>
  27. </body>
  28. </html>

效果预览

代码汇

4. 插件的引用方法

插件引用有三种方法都可以用。

  • 第一种

    editormd.loadPlugin('插件文件路径','回调函数')

  1. editormd.loadPlugin("../plugins/image-handle-paste/image-handle-paste", function(){
  2. testEditor.imagePaste();
  3. });
  • 第二种
  1. //引入插件
  2. <script src="../plugins/image-handle-paste/image-handle-paste.js"></script>
  3. //使用
  4. testEditor.imagePaste();
  • 第三种

editormd.loadPlugin("要执行的插件方法名",插件地址)

  1. this.executePlugin("imagePaste", "image-handle-paste/image-handle-paste");