🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
###粘贴截图 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 + '...'); ```