本文关于自定义七牛插件用于
editor.md上传图片到七牛云官网地址
一、效果展示
二、开发一个上传七牛云的插件
- 1、参考文档,我也是从上面拷贝代码修改
- 2、关于七牛云的使用,请参考我的django文章
-
3、修改第一点中拷贝的插件代码
4、关于上传的地址参考
三、使用
-
1、静态页面
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./css/editormd.css"/> <script src="js/jquery.min.js"></script> <script src="./js/editormd.js"></script> </head> <body> <div id="editormd"> <textarea style="display:none;">### Hello Editor.md !</textarea> </div> <button id="btn">获取markdown语句</button> <button id="btn1">获取全部的文本语句</button> </body> </html> -
2、引入插件包
<script src="./plugins/image-dialog-qiniu/image-dialog-qiniu.js"></script> -
3、脚本的书写
var editor = editormd("editormd", { width: "100%", height: 540, syncScrolling: "single", path: "./lib/", imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], saveHTMLToTextarea: true, // previewTheme: "dark", // 主题 toolbarIcons: function () { return [ "undo", "redo", "bold", "del", "italic", "hr", "|", "h1", "h2", "h3", "h4", "h5", "h6", "list-ul", "list-ol", "|", "link", "reference-link", "qiniu", "table", "code", "code-block", "datetime", "|", "goto-line", "preview", "watch", "|", "fullscreen", "clear", "search"]; }, //配置七牛上传插件 toolbarIconsClass: { qiniu: "fa-cloud-upload" }, toolbarHandlers: { qiniu: function (cm, icon, cursor, selection) { this.imageDialogQiniu(); } }, qiniuTokenUrl: "http://127.0.0.1:9000/token/", //本地服务器获取七牛token的url qiniuPublishUrl: "http://pdc7jra0s.bkt.clouddn.com/" //远程七牛服务器个人发布地址 }); // 点击的时候获取全部的markdown $('#btn').on('click', function () { console.log(editor.getMarkdown()) }); // 获取全部的文本 $('#btn1').on('click', function () { console.log(editor.getHTML()) })