首页 > 其他分享> > editor配置上传图片到七牛云服务器

editor配置上传图片到七牛云服务器

2021-06-15 16:53:25 作者：互联网

本文关于自定义七牛插件用于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())
  })

四、代码下载

标签：function,牛云,qiniu,插件,七牛,editor,上传
来源： https://blog.51cto.com/u_3409716/2904726