在angular中集成wangEditor

页面上先引入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();  
            }
        };
});

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

@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:Proapache-tomcat-7.0.54picUpload
                    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.kancloud.cn/wangfupeng/wangeditor2/132884

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!