自己动手开发更好用的markdown编辑器-05(粘贴上传图片)
上一篇我们实现了实时预览
功能.
今天这篇要利用免费的七牛云存储服务来实现粘贴自动上传图片
的功能.
不想看过程的朋友可以直接下载打包好的程序使用,使用之前记得配置七牛帐号.
文章的内容包含以下三点:
- 七牛云存储.
- clipboard-apis
- ajax文件上传
七牛云存储
系统设置
首先在系统设置里增加七牛空间设置
部分,这里就简单的贴上代码,因为系统设置模块之前几篇了都讲过了.
1 |
... |
1 |
... |
增加了accesskey
,secretkey
,空间名
,过期时间
四个用于上传图片的字段. 其中accesskey
, secretkey
用于验证权限,空间名
用于指定上传图片的存储空间,过期时间
指定授权的过期时间. 这四个字段共同组成上传授权的Token
,生成的方法如下:
安装七牛nodejs版sdk
1 |
npm install qiniu --save |
1 |
... |
配置七牛帐号
首先得注册一个七牛帐号.
进入后台,新建一个空间,我这里取的空间名为blog
,用于我博客的图片存储.
选择新建的空间,点击空间设置
>域名设置
,查看自动分配的域名
回到后台首页,点击账号设置
,可以查看accessKey(AK)
和SecretKey(SK)
在刚做好的后台里配置好这几个字段
我把我空间的密钥遮住了,大家请填上自己的空间密钥
图片上传
图片的存储空间准备好了,现在来实现上传的功能.
初始化editor的时候传入七牛的token
studio/directive.js
1 |
... |
studio/editor里实现图片上传功能
1 |
... |
至此这个功能就完成了,随便截张图然后在编辑器里粘贴,编辑器就会自动生成图片引用地址:
这个功能较为简单,因此今天篇幅较小.
总结
粘贴上传图片的功能让我不用频繁的停下来上传图片,可以大大的提高用markdown写文章的效率.
目前功能还较为简单,不能指定图片名,不能分目录,大家可以根据自己的需求修改代码,完善功能.
接下来的计划:
- 自动更新.
- 云同步.
- 插件机制
- 表情插件.
附件
自己动手开发更好用的markdown编辑器-05(粘贴上传图片)的更多相关文章
- 自己动手开发更好用的markdown编辑器-04(实时预览)
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/04/25/hexomd-04/ 程序打包 文章目录 1. 打开新窗口 ...
- 自己动手开发更好用的markdown编辑器-07(扩展语法)
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/05/19/hexomd-07/ 文章目录 1. 准备工作 2. 目录语法 ...
- 自己动手开发更好用的markdown编辑器-06(自动更新)
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/05/12/hexomd-06/ 文章目录 1. 自动更新方案 2. 实现 ...
- 自己动手制作更好用的markdown编辑器-01
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im 文章目录 1. 简介 2. 项目结构 3. 程序主界面 4. 拖动窗口 5. app ...
- 自己动手制作更好用的markdown编辑器-03
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/04/24/hexomd-03/ 文章目录 1. 系统模块 2. 记录上次打开的 ...
- 自己动手制作更好用的markdown编辑器-02
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im 文章目录 1. 工具条 1.1. 样式 1.2. 工具条截图 2. 状态栏消息 3. 文件 ...
- 任由文字肆意流淌,更自由的开源 Markdown 编辑器
对于创作平台来说内容编辑器是十分重要的功能,强大的编辑器可以让创作者专注于创作"笔"下生花.而最好取悦程序员创作者的方法之一就是支持 Markdown 写作,因为大多数程序员都是用 ...
- Markdown编辑器开发记录(二):Markdown编辑器的使用与开发入门
Markdown编辑器的使用与开发入门 在部门做技术分享的时候简单整理了一下手里的资料 1 是什么 1.1 Markdown是一种轻量级标记语言 Markdown是一种轻量级标记语言,创始人为约翰·格 ...
- Markdown编辑器开发记录(一):开发的初衷和初期踩的坑
先说下选择Markdown编辑器的原因,我们进行平台开发,需要很多的操作手册和API文档,要在网站中展示出来就需要是HTML格式的文件,但是由于内容很多,不可能全部由技术人员进行文档的编写,如果是只有 ...
随机推荐
- ubuntu 16.04.1 LTS python 3.5.2安装
python 3.5.2安装-----------------------apt-get -y install build-essential checkinstallapt-get install ...
- 【并查集】bzoj1015 [JSOI2008]星球大战starwar
倒着处理删点,就变成了加点,于是并查集. #include<cstdio> using namespace std; #define N 400001 int fa[N],kill[N], ...
- 【DFS序】【莫队算法】【权值分块】bzoj2809 [Apio2012]dispatching
题意:在树中找到一个点i,并且找到这个点子树中的一些点组成一个集合,使得集合中的所有点的c之和不超过M,且Li*集合中元素个数和最大 首先,我们将树处理出dfs序,将子树询问转化成区间询问. 然后我们 ...
- 【计算几何】bzoj2338 [HNOI2011]数矩形
对于两条线段,若其中点重合,且长度相等,那么它们一定是某个矩形的对角线. N*N地处理出所有线段,排序,对每一部分中点重合.长度相等的线段进行暴力枚举,更新答案. 用 long double 注意EP ...
- Git学习笔记(一) 安装及版本库介绍
安装Git 最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Unix系统上跑.不过,慢慢地有人把它移植到了Windows上.现在,Git可以在Linux.Unix.Mac和 ...
- 在PC机上,如何用Chrome浏览器模拟查看和调试手机的HTML5页面?
如题,如何用PC机上的Chrome浏览器模拟查看和调试手机HTML5页面? 参考操作步骤如下: 第一步.用Chrome打开要调试的页面: 第二步.按F12,打开“开发者工具”,点击其右上角的“Dock ...
- [转] C/C++中printf和C++中cout的输出格式
原文地址 一. Printf 输出格式 C中格式字符串的一般形式为: %[标志][输出最小宽度][.精度][长度]类型,其中方括号[]中的项为可选项.各项的意义介绍如下:1.类型类型字符用以表示输出数 ...
- AE 开发添加新增字段 报错
在为现有要素类新增字段时,有可能会爆出该表正被其他程序或其他人使用,这时我们就会添加失败,解决办法如下: 在新增字段之前,先修改SchemaLock的状态 ISchemaLock pSchemaLoc ...
- Bitcoin 比特币, LTC(litecoin)莱特币,
1.挖掘机 http://asicme.com/index 2.官方: http://bitcoin.org/zh_CN/ =============== 1\ 最好的比特币资讯网站 ht ...
- pandas判断缺失值的办法
参考这篇文章: https://blog.csdn.net/u012387178/article/details/52571725 python pandas判断缺失值一般采用 isnull(),然而 ...