ckeditor5 ck에디터5 javascript java 자바스크립트 자바 이미지 업로드 사용 방법

1. javascript

 

ClassicEditor
		.create( document.querySelector( '#editor1' ), {
			
			toolbar: {
				items: [
					'heading',
					'|',
					'bold',
					'italic',
					'link',
					'bulletedList',
					'numberedList',
					'|',
					'indent',
					'outdent',
					'|',
					'imageUpload',
					'blockQuote',
					'insertTable',
					'mediaEmbed',
					'undo',
					'redo',
					'exportPdf',
					'fontBackgroundColor',
					'fontColor',
					'fontSize',
					'fontFamily',
					'highlight',
					'horizontalLine',
					'underline',
					
				]
			},
			language: 'ko',
			image: {
				toolbar: [
					'imageTextAlternative',
					'imageStyle:full',
					'imageStyle:side'
				]
			},
			table: {
				contentToolbar: [
					'tableColumn',
					'tableRow',
					'mergeTableCells',
					'tableCellProperties',
					'tableProperties'
				]
			},
			ckfinder: {
				uploadUrl: '/ckeditor/ckeditor5ImageUpload.do'  //url
			}
			
		} )
		.then( editor => {
			window.editor = editor;
					
			
		} )
		.catch( error => {
			console.error( error );
		} );
        
<textarea id="editor1"></textarea>

 

유효성 검사

if (window.editor.getData() == "") {  //then   window.editor = editor;
        alert("내용을 입력해주세요");
        window.editor.editing.view.focus();    
        return; 
 } 

 

 

2. java

이미지 업로드 컨트롤러 전자정부프레임워크 사용

 

@ResponseBody
@RequestMapping(value = "/ckeditor/ckeditor5ImageUpload.do", method = {RequestMethod.POST, RequestMethod.GET})
public String ckeditor5ImageUpload(HttpServletRequest request, HttpServletResponse response, @RequestParam MultipartFile upload) throws Exception {

	String url = null;

	try {

		final String uploadDir = GlobalsProperties.getProperty("Globals.ckeditorFileStorePath");

		final long maxFileSize = 1024 * 1024 * 600;

		List<EgovFormBasedFileVo> list = EgovFileUploadUtil.uploadFiles(request, uploadDir, maxFileSize);

		if(list == null){
			return "{ \"uploaded\" : false, \"error\": { \"message\": \"업로드 중 에러가 발생했습니다.\" } }";
		}else{
			if (list.size() > 0) {
				EgovFormBasedFileVo vo = list.get(0); // 첫번째 이미지

				url = request.getContextPath() + 
                			"/utl/web/imageSrcCkediror.do?" + 
                			"path=" + vo.getServerSubPath() + 
                			"&physical=" + vo.getPhysicalName() + 
                			"&contentType=" + vo.getContentType();

			}
			return "{ \"uploaded\" : true, \"url\" : \"" + url + "\" }";

		}

	} catch (IOException e) {
		e.printStackTrace();
	} finally {

	}	
	return "{ \"uploaded\" : false, \"error\": { \"message\": \"업로드 중 에러가 발생했습니다. 다시 시도해 주세요.\" } }";
}