springboot summernote 加入自定义上传按钮

缺乏、安全感 2022-03-30 03:37 500阅读 0赞

1.  自定义按钮

2. 自定义菜单

$('.summernote').summernote(
    					{
    						height : '220px',
    						lang : 'zh-CN',
    
    						toolbar : [
    								[ 'operate', [ 'undo', 'redo' ] ],
    								[ 'magic', [ 'style' ] ],
    								[
    										'style',
    										[ 'bold', 'italic', 'underline',
    												'clear' ] ],
    								[
    										'para',
    										[ 'height', 'fontsize', 'ul', 'ol',
    												'paragraph' ] ],
    								[
    										'font',
    										[ 'strikethrough', 'superscript',
    												'subscript' ] ],
    								[ 'color', [ 'color' ] ],
    								[
    										'insert',
    										[ 'hello', 'video', 'link', 'picture',
    												'table', 'hr' ] ],// 自定义按钮展示
    								[ 'layout', [ 'codeview' ] ], ],
    						buttons : {
    							hello : HelloButton
    						// 自已定义的按钮函数
    						},
    
    						callbacks : {
    							onImageUpload : function(files, editor, $editable) {
    								console.log("onImageUpload");
    								sendFile(files);
    							}
    						}
    					});
    			var content = $("#content").val();
    
    			$('#content_sn').summernote('code', content);
    			validateRule();

3. 自定义按钮onclick函数 myFunction

function myFunction(){
    	var editPage = layer.open({
    		type : 2,
    		title : '上传附件',
    		maxmin : true,
    		shadeClose : false, // 点击遮罩关闭层
    		area : [ '600px', '322px' ],
    		content : prefix + '/upload'  // iframe的url
    	});
    	return 'test2';
    }

4. 上传页面js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjM1ODc0_size_16_color_FFFFFF_t_70][]

5 后台上传处理

@ResponseBody
    	@PostMapping("/upload")
    	R upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
    		String orifileName = FileUtil.oriName(file.getOriginalFilename());
    		String fileName = FileUtil.renameToUUID(orifileName);
    		String size=FileUtil.getSize(file.getSize());
    		SecFileDO sysFile = new SecFileDO(orifileName,size,FileType.fileType(fileName), "/files/" + fileName,getUsername(), new Date());
    		try {
    			FileUtil.uploadFile(file.getBytes(), bootdoConfig.getUploadPath(), fileName);
    		} catch (Exception e) {
    			return R.error();
    		}
    
    		if (secFileService.save(sysFile) > 0) {
    			return R.ok().put("id",sysFile.getId()).put("name", orifileName);
    		}
    		return R.error();
    	}

6. 上传成功后将上传的文件名回写到 summernote中

function writeBack(id,name){
    	var addr=getURL()+ prefix + "/download?id=" + id;
    	addr='<a href="'+addr+'" target="_blank">'+name+'</a>';
    	var str=$(".note-editable p").html();
    	$(".note-editable p").append(addr);
    //	context.invoke('editor.insertText', result);
    }
    
    function getURL() {
    	var curWwwPath = window.document.location.href;
    	// 获取主机地址之后的目录，如： test/test/test.htm
    	var pathName = window.document.location.pathname;
    	var pos = curWwwPath.indexOf(pathName); // 获取主机地址，如： http://localhost:8080
    	var localhostPaht = curWwwPath.substring(0, pos); // 获取带"/"的项目名，如：/web
    	var projectName = pathName
    			.substring(0, pathName.substr(1).indexOf('/') + 1);
        var rootPath = localhostPaht + projectName;
    	return localhostPaht;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjM1ODc0_size_16_color_FFFFFF_t_70]: /images/20220330/0926bf7cdb9c4ec68002be4e4e97068d.png