在angular中集成wangEditor

最新推荐文章于 2025-05-29 11:33:52 发布

Dulcie_y

最新推荐文章于 2025-05-29 11:33:52 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： angular wangEditor

本文链接：https://blog.youkuaiyun.com/yuanzihui/article/details/73497940

前端开发专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在页面上集成wangEditor富文本编辑器，包括引入必要的文件、配置上传图片功能及处理后台请求等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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