wangEditor富文本编辑器集成七牛云做图片上传 — 实现单页面初始化多个编辑器
一.适用场景
博客、新闻等需要特殊排版的效果展示界面
二.准备
- jQuery文件：https://jquery.com/download/
- 七牛云js文件：https://developer.qiniu.com/kodo/sdk/1283/javascript
- plupload文件：https://www.plupload.com/download/
- wangEditor文件包：http://www.wangeditor.com/
- 七牛云个人服务器地址
三.效果原型
四.代码示例
1.前端代码
引用库文件：
创建DIV作为初始化编辑器的容器：
页面加载初始化编辑器：
$(function(){
initEditor('firstEditor','firstBtn','这是一个标题','min');
initEditor('secondEditor','secondBtn','这是一个内容','max');
})初始化富文本编辑器：
/*
* 初始化富文本编辑器
* editId DIV容器id
* testsubmitBtn 获取编辑器内容按钮id
* data 初始化编辑器内容
* height 自定义编辑器高度
*/
function initEditor(editId,testsubmitBtn,data,height){
var E = window.wangEditor
var editor = new E('#'+editId)
// 自定义菜单配置
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'list', // 列表
'justify', // 对齐方式
'image', // 插入图片
'table', // 表格
'undo', // 撤销
'redo' // 重复
]
editor.customConfig.qiniu = true
editor.create()
// 定义编辑器高度
if(height == 'max'){
$('#'+editId).children('.w-e-text-container').attr('style','border:1px solid #ccc; border-top:none; height:500px; z-index:10000;');
}else if(height == 'min'){
$('#'+editId).children('.w-e-text-container').attr('style','border:1px solid #ccc; border-top:none; height:200px; z-index:10000;');
}
$('#'+editId).attr('style','height:auto;');
// 定义编辑器初始内容
if (data != undefined && data != null && data != ""){
editor.txt.html(data)
}else{
editor.txt.clear()
}
// 初始化七牛上传
uploadInit(editor)
// 获取编辑器内容
document.getElementById(testsubmitBtn).addEventListener('click', function () {
if(editor.txt.html()!=new String('
')){
alert(editId + "内容：" + editor.txt.html());
}
}, false)
}初始化七牛云上传：
/*
* 初始化七牛上传的方法
* editors 编辑器对象
*/
function uploadInit(editors) {
// 获取相关 DOM 节点的 ID
var btnId = editors.imgMenuId;
var containerId = editors.toolbarElemId;
var textElemId = editors.textElemId;
// 创建上传对象
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4', //上传模式,依次退化
browse_button: btnId, //上传选择的点选按钮，**必需**
uptoken_url: 'http://localhost:8080/api/open/qiNiu/getUpToken.do', //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）
domain: 'http://invoice.mayn.com.cn/', //bucket 域名，下载资源时用到，**必需**
container: containerId, //上传区域DOM ID，默认是browser_button的父元素，
max_file_size: '100mb', //最大文件体积限制
flash_swf_url: 'plupload/Moxie.swf', //引入flash,相对路径
filters: {
mime_types: [
//只允许上传图片文件 （注意，extensions中，逗号后面不要加空格）
{ title: "图片文件", extensions: "jpg,gif,png,bmp" }
]
},
max_retries: 3, //上传失败最大重试次数
dragdrop: true, //开启可拖曳上传
drop_element: textElemId, //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
chunk_size: '4mb', //分块上传时，每片的体积
auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传
init: {
'FilesAdded': function(up, files) {
plupload.each(files, function(file) {
// 文件添加进队列后,处理相关的事情
printLog('on FilesAdded');
});
},
'BeforeUpload': function(up, file) {
// 每个文件上传前,处理相关的事情
printLog('on BeforeUpload');
},
'UploadProgress': function(up, file) {
// 显示进度
printLog('进度 ' + file.percent)
},
'FileUploaded': function(up, file, info) {
// 每个文件上传成功后,处理相关的事情
printLog(info);
var domain = up.getOption('domain');
var res = $.parseJSON(info);
var sourceLink = domain + res.key; //获取上传成功后的文件的Url
printLog(sourceLink);
// 插入图片到editor
editors.cmd.do('insertHtml', '
')
},
'Error': function(up, err, errTip) {
//上传出错时,处理相关的事情
printLog('on Error');
},
'UploadComplete': function() {
//队列文件处理完毕后,处理相关的事情
printLog('on UploadComplete');
}
}
});
}
function printLog(title, info) {
window.console && console.log(title, info);
}字段说明：
- uptoken_url：编码调用七牛云接口获取请求token
- domain：个人七牛云服务器地址
2.后端代码
Java调用七牛云接口获取请求token：
导入包（https://developer.qiniu.com/kodo/sdk/1239/java）
com.qiniu
qiniu-java-sdk
[7.0.0, 7.0.99]
java实现：
package org.tempuri;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;
import com.qiniu.util.Auth;
@Controller
@RequestMapping("api/open/qiNiu")
public class test {
// 访问密钥
private static final String ACCESS_KEY = "sFCRR9Ti*********************JfL26kD";
// 应用编码
private static final String SECRET_KEY = "lJuSuv3G*********************oPdIVfwB";
// 访问空间
private static final String BUCKET_NAME = "mayninvoice";
@RequestMapping("/getUpToken")
public void getUpToken(HttpServletRequest request, HttpServletResponse response) {
Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
String token = auth.uploadToken(BUCKET_NAME);
//组装令牌返回前台
String Uptoken = "{\"uptoken\":\"" + token + "\"}";
try {
response.setContentType("application/json;charset=utf-8");
request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
PrintWriter out = response.getWriter();
out.print(Uptoken);
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
五.代码下载
代码下载