window.wangEditors 富文本操作,重点关于插入上传图片

具体的一些操作我是看别人写的博客，这个是地址https://blog.csdn.net/yehaocheng520/article/details/106033965

写的挺好的

具体的上传图片的操作

https://blog.csdn.net/weixin_40079336/article/details/82964495

上传图片的操作刚开始看可能会不太明白，主要的代码就是

<script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor');
        editor.customConfig.uploadImgServer = root + "fileLssue/upload1.do"; //上传URL
      
       
    
        editor.customConfig.uploadFileName = 'myFileName';
        editor.customConfig.uploadImgHooks = {
            customInsert: function (insertImg, result, editor) {
                        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                      debugger;
                        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                        var url =result.data;
                        insertImg(url);
                 
                        // result 必须是一个 JSON 格式字符串！！！否则报错
                    }
                }
        editor.create();    
</script>	

editor.customConfig.uploadImgServer = root + "fileLssue/upload1.do";  这个主要是你上传图片的接口

editor.customConfig.uploadFileName = 'myFileName'; 这个是你接口的参数名称

editor.customConfig.uploadImgHooks  这个是请求接口之后可以获取返回的参数，

如果你有上传图片的接口的话，就不用他写的那个接口，没有的话，可以参考一下

下面这个是我的上传图片接口

@RequestMapping("/uploadContractFileOther.do")
    @ResponseBody
    public ResultData uploadContractFileOther(MultipartFile file){
        try {
            if(file == null || file.getSize() <= 0){
                return ResultData.fail("上传文件不能为空");
            }
            if(file.getSize() > 1024 * 1024 * 20){
                return ResultData.fail("上传文件大小不能超过20M");
            }
            String fileName = file.getOriginalFilename();
            fileName = fileName.substring(0,fileName.lastIndexOf("."));
            OSSClientUtil oss = new OSSClientUtil();
            String name = oss.uploadContractFile(file);
            String url = oss.getContractFileUrl(name);

            return ResultData.success("成功",url);
        }catch (Exception e){
            e.printStackTrace();
            return ResultData.fail("服务器异常，上传文件失败");
        }
    }


public String uploadContractFile(MultipartFile file) throws ImgException {
        String originalFilename = file.getOriginalFilename();
        String substring = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
        Random random = new Random();
        String name = random.nextInt(10000) + System.currentTimeMillis() + substring;
        InputStream inputStream = null;
        try {
            inputStream = file.getInputStream();
            //创建上传Object的Metadata
            ObjectMetadata objectMetadata = new ObjectMetadata();
            objectMetadata.setContentLength(inputStream.available());
            objectMetadata.setCacheControl("no-cache");
            objectMetadata.setHeader("Pragma", "no-cache");
            objectMetadata.setContentType(getcontentType(name.substring(name.lastIndexOf("."))));
            objectMetadata.setContentDisposition("inline;filename=" + name);
            //上传文件
            String path = contractFiledir;//这个是你上传文件的地址  需要改下
            ossClient.putObject(bucketName//这个参数是空间名称，因为这个是上传到阿里云的，具体的你们自己试, path + name, inputStream, objectMetadata);
            return name;
        } catch (Exception e) {
            throw new ImgException("文件上传失败");
        }finally {
            try {
                if (inputStream != null) {
                    inputStream.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
            ossClient.shutdown();
        }
    }


//这个是处理地址的
public String getContractFileUrl(String fileUrl) {
        if (!StringUtils.isEmpty(fileUrl)) {
            String[] split = fileUrl.split("/");
            return this.getUrl(this.contractFiledir + split[split.length - 1]);
        }
        return null;
    }

下面的是富文本框页面 js 和请求接口时候参数的处理

这个是我js配置富文本框
var A = window.wangEditor;
    var editorA = new A('#detail');
    editorA.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        //'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        //'quote',  // 引用
        //'emoticon',  // 表情
        'image',  // 插入图片
        //'table',  // 表格
        //'video',  // 插入视频
        //'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
    ];

    editorA.customConfig.onchange = function (html) {
        // html 即变化之后的内容
        html=decodeURIComponent(html);
        $('#detail .w-e-text-container p').addClass("defaultStyle")
        $('#detail .w-e-text-container>div>div').addClass("defaultStyle")
    }
    // editorA.customConfig.uploadImgShowBase64 = true
    editorA.customConfig.uploadImgServer = projectUrl+ '/file/uploadContractFile.do'
    editorA.customConfig.uploadFileName = 'file';
    editorA.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
            // debugger;
            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            var url =result.data.url;
            insertImg(url);

            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    }
    editorA.customConfig.customAlert = function (info) {
        // info 是需要提示的内容
        alert('自定义提示：' + info)
    }
    editorA.create();
    $('#goodsDescribe .w-e-text-container').height('200');

    document.getElementById('detail').addEventListener('click', function () {
        // 读取 html
        console.log(decodeURIComponent(editorA.txt.html()))
    }, false)

参数的处理

form.on('submit(saveActivity)', function(data){
        //富文本框  下面是对内容的处理
        var dataA = editorA.txt.html();
        var textElemReg = /<([a-z]+?)(?:\s+?[^>]*?)?>\s*?<\/\1>/;
        var replaceP = /<p><br><\/p><p><br><\/p>/;
        do{
            dataA = dataA.replace(textElemReg, '');
        }while(textElemReg.test(dataA)); // 去除多余的空标签
        do{
            dataA = dataA.replace(replaceP, '');
        }while(replaceP.test(dataA)); // 去除多余的换行符
        dataA=decodeURIComponent(dataA);
        data.field.content = encodeURI(dataA)


        dataA = dataA.replace(/[&nbsp;|" "|\n]/g,"");//去掉空格计数
        dataA =dataA.replace(/<[^>]*>|/g,"");//将HTML转化为纯文本
        if(dataA!=null&&dataA!='') {
            var length = jmz.GetLength(dataA);
            if (length > 10000) {
                layer.msg('最多输入10000个字符', {icon: 5});
                return;
            }
        }else if(dataA == ''){
            data.field.content = dataA
        }


这个是我请求的接口  
        if (!edit){//添加
            $.ajax({
                type:"post",
                url:projectUrl+"/business/addBusinessInfo.do",
                data:data.field,
                success:function(returnData){
                    if(returnData.status==0){
                        layer.msg(returnData.msg);
                        setTimeout(function () {
                            window.location.href =  projectUrl + '/modelList/manage/businessInfo.jsp';
                        },3000)
                    }else{
                        layer.msg(returnData.msg);
                    }
                },
            })
            return false//阻止表单提交
        } else if (edit ){//编辑
            $.ajax({
                type:"post",
                url:projectUrl+"/business/addBusinessInfo.do",
                data:data.field,
                success:function(returnData){
                    if(returnData.status==0){
                        layer.msg(returnData.msg);
                        setTimeout(function () {
                            window.location.href =  projectUrl + '/modelList/manage/businessInfo.jsp';
                        },3000)

                    }else{
                        layer.msg(returnData.msg);
                    }
                }
            })
            return false//阻止表单提交
        }

    });
这个是上面验证长度的
    var jmz = {};
    jmz.GetLength = function(str) {
        return str.replace(/[\u0391-\uFFE5]/g,"aa").length;  //先把中文替换成两个字节的英文，在计算长度
    };