页面上先引入wangEditor包
<link href="<c:url value='/css/wangEditor.min.css'/>" rel="stylesheet" media="screen"/>
<script src="<c:url value='/js/wangEditor.min.js'/>"></script>
设置editor id,以及绑定变量,wangEditor的内容变化绑定到了contentSelect,可在controllor中对contentSelect进行处理传值等。
<div style="height:200px;max-height:250px;" id="update" ng-model="contentSelect" contenteditable="true"></div>
引入directive
<script src="<c:url value='/js/directive/application_directive.js' />"></script>
创建application_directive.js,在directive中用id初始化wangEditor
ApplicationApp.directive('contenteditable',function() {
return {
restrict: 'A',require: '?ngModel',link: function(scope,element,attrs,ngModel) {
// 初始化 编辑器内容
if (!ngModel) {
return;
} // do nothing if no ng-model
// Specify how UI should be updated
ngModel.$render = function() {
element.html(ngModel.$viewValue || '');
};
// 创建编辑器
var editor = new wangEditor('update');
editor.config.uploadImgUrl = '/Application/savePic.do';
editor.onchange = function () {
// 编辑区域内容变化时,实时打印出当前内容
console.error("内容变化:"+this.$txt.html());
var html = editor.$txt.html();
ngModel.$setViewValue(html);
};
editor.create();
}
};
});
@RequestMapping(value = "/savePic.do",method = RequestMethod.POST)
@ResponseBody
public String savePic(HttpServletRequest request)
throws UnknownHostException {
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
System.out.println("isMultipart="+isMultipart);
// 获取服务器IP,供虚拟地址
String ip = InetAddress.getLocalHost().getHostAddress();
File file = null;
String fileName = null;
String virtualPath = null;
try {
List<FileItem> items = null;
if (isMultipart) {
items = CommonUtil.upload(request);
System.out.println("items ="+items );
}
FileItem item = null;
Iterator<FileItem> it = items.iterator();
while (it.hasNext()) {
item = it.next();
if (!item.isFormField() && item.getSize() > 0) {
fileName = String.format("%s%s",CommonUtil.formatFileDate(),item.getName());
System.out.println("fileName ="+fileName );
// 该路径需要改成服务器所在PC物理路径
// E:\\Pro\\apache-tomcat-7.0.54\\picUpload
file = new File(VERIFIER_PATH,fileName);
if (!file.getParentFile().mkdirs()) {
System.out.println("file.getParentFile().mkdirs() ="+file.getParentFile().mkdirs() );
file.createNewFile();
}
CommonUtil.saveUploadFile(item,file);
}
}
} catch (Exception e) {
e.printStackTrace();
return "Fail";
}
virtualPath = String.format(VISUAL_PATH,ip,fileName);
return virtualPath;
}
原文链接:https://www.f2er.com/angularjs/147022.html