在angular中集成wangEditor

页面上先引入wangEditor包

<link href="" rel="stylesheet" media="screen"/>
<script src="">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="">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 updatedngModel.$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();  }};
});

后台处理，在wangEditor中显示图片

    @RequestMapping(value = "/savePic.do", method = RequestMethod.POST)@ResponseBodypublic 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 items = null;if (isMultipart) {items = CommonUtil.upload(request);System.out.println("items ="+items );}FileItem item = null;Iterator 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\\picUploadfile = 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.kancloud.cn/wangfupeng/wangeditor2/132884

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！