###粘贴截图
wangEditor 自`1.3.11`版本开始支持粘贴截图。
>注意,只是粘贴剪切板中的截图。如果是单个图片文件,请配置图片上传。上文有详细描述。
>另外注意,这种高级功能,IE低版本就别想兼容了,不好办。
如果不进行任何配置,wangEditor 会使用 html5 的文件操作功能,将图片保存为base64编码。这样做既有优点又有缺点。
**优点:**
- 无需关心图片上传,图片将以base64编码的形式存储在html文件中
- 页面加载时不用加载图片文件,减少http请求,提高性能
**缺点:**
- base64编码的图片,在IE低版本中不显示
- base64编码有利于小图片,而对于大图片来说,它将比图片文件大,占用更多的流量
-------------
**如何上传粘贴的截图?**
上传粘贴的截图也非常简单,只需要在执行`wangEditor()`时候,传入一个`pasteUrl`参数,参数只为服务端地址。
```js
$('textarea1').wangEditor({
pasteUrl: '../upload.php'
});
```
具体的后端代码可参考[非跨域上传的后端代码](http://www.kancloud.cn/wangfupeng/wangeditor/65751),除此之外还需要注意以下几点:
- 后台必须使用`wangEditorPasteFile`这个 key 来获取post的文件,例如 `file = request.file['wangEditorPasteFile']`
- 后台程序保存了图片地址之后,要返回该图片的url地址
-------
**目前有nodejs的后台代码示例可供参考**
```javascript
// nodejs API 参考:http://nodeapi.ucdok.com/#/api/
// 需要本地安装 formidable ,参见 https://github.com/felixge/node-formidable
var formidable = require('formidable');
var http = require('http');
var fs = require('fs');
var url = require('url');
var path = require('path');
// 文件将要上传到哪个文件夹下面
var uploadfoldername = 'uploadfiles';
var uploadfolderpath = __dirname + '/' + uploadfoldername;
// 提交的 form 中,input-file 的 name
var inputfilename = 'wangEditorPasteFile';
var port = 8888;
http.createServer(function (req, res) {
// ----------------------用 '/upload' 这个路由来处理文件上传----------------------
if (req.url === '/upload' && req.method.toLowerCase() === 'post') {
// 使用第三方的 formidable 插件初始化一个 form 对象
var form = new formidable.IncomingForm();
// 处理 request
form.parse(req, function (err, fields, files) {
if (err) {
return console.log('formidable, form.parse err');
}
// inputfilename 变量存储的是客户端页面中 form 中的 input-file 标签的 name 属性值
var file = files[inputfilename];
// formidable 会将上传的文件存储为一个临时文件,现在获取这个文件的目录
var tempfilepath = file.path;
// 获取文件类型
var type = file.type;
// 获取文件名,并根据文件名获取扩展名
var filename = file.name;
var extname = filename.lastIndexOf('.') >= 0
? filename.slice(filename.lastIndexOf('.') - filename.length)
: '';
// 文件名没有扩展名时候,则从文件类型中取扩展名(如粘贴图片时)
if (extname === '' && type.indexOf('/') >= 0) {
extname = '.' + type.split('/')[1];
}
// 将文件名重新赋值为一个随机数(避免文件重名)
filename = Math.random().toString().slice(2) + extname;
// 构建将要存储的文件的路径
var filenewpath = uploadfolderpath + '/' + filename;
// 将临时文件保存为正式的文件
fs.rename(tempfilepath, filenewpath, function (err) {
// 存储结果
var result = '';
if (err) {
// 发生错误
console.log('fs.rename err');
result = 'error';
} else {
// 保存成功
console.log('fs.rename done');
// 拼接图片url地址
result = 'http://localhost:' + port + '/' + uploadfoldername + '/' + filename;
}
// 返回结果
res.writeHead(200, {
'Content-type': 'text/html'
});
res.end(result);
});
});
} else {
// ---------------------- 其他路由,直接作为静态文件返回 ----------------------
var pathname = url.parse(req.url).pathname;
var filepath = path.join(__dirname, pathname);
fs.readFile(filepath, function (err, file) {
if (err) {
res.writeHead(404);
console.log('response file error: ' + filepath);
res.end('404 NOT FOUND...');
return;
}
res.writeHead('200');
console.log('response file success: ' + filepath);
res.end(file);
});
}
}).listen(port);
// 监听 localhost port 端口
console.log('server start at ' + port + '...');
```
- 关于wangEditor
- 基本应用
- 开始使用
- 下载wangEditor
- 创建页面
- 生成编辑器
- 与font-awesome的冲突
- 设置高度
- 设置绝对高度
- 默认高度和最大高度
- 初始化内容
- html方式
- javascript方式
- 获取内容
- 追加内容
- 基本配置
- 自定义配置菜单
- 配置onchange监听事件
- 自定义配置表情图标
- 简单表情
- 多组表情
- 配置代码高亮
- 下载highlight
- 使用highlight
- 与wangEditor集成
- 不过滤javascript代码
- 图片上传
- 非跨域
- 使用plupload做一个上传图片的页面
- 在页面加入wangEditor
- 将两者结合
- 后台代码示例
- C#
- java
- php
- nodejs
- 征集
- 跨域
- 下载 wangEditor_uploadImg_assist.html
- 编写后台代码
- 配置url地址
- 后台代码示例
- C#
- java
- python
- nodejs
- 征集
- 粘贴截图
- 其他
- 多语言支持
- 默认中文
- 使用英文
- 使用其他语言
- 单页多个编辑器
- 使用requirejs
- 使用seajs
- 增加 placeholder 功能
- 定制开发