[ckEditor5] ckEditor5 구현 참고 코드

1. script 추가

<script src="${pageContext.request.contextPath}/js/egovframework/admin/ck5/ckeditor.js"></script>
<script src="${pageContext.request.contextPath}/js/egovframework/admin/ck5/uploadAdapter.js"></script>

or

https://ckeditor.com/ckeditor-5/download/

CKEditor 5 - Download Latest Version

 

 

 

 

 

 

2. textarea 지정

<textarea rows="3"  class="form-control ckeditor" id="contentsDs_temp" name="contentsDs_temp" style="height:250px;" ><c:out value=""></c:out></textarea>

 

 

 

 

 

 

3. script영역에 ck5 에디터 코드 추가

// CK5 에디터
	var ckEditor;
	ClassicEditor
		.create(document.querySelector('#contentsDs_temp'), {
			toolbar:{items:['bold','italic','underline','horizontalLine','bulletedList','numberedList','|','fontBackgroundColor','fontColor','fontSize','highlight','|','indent','outdent','|','link','imageUpload','blockQuote','insertTable','|','undo','redo','|','exportPdf']},
			language:'ko',
			image:{toolbar:['imageTextAlternative','imageStyle:full','imageStyle:side']},
			table:{contentToolbar:['tableColumn','tableRow','mergeTableCells','tableCellProperties','tableProperties']},
			extraPlugins:[customUploadAdapterPlugin]
		}).then(editor => {
			ckEditor = editor;
	});

 

 

 

 

 

 

4. script영역에  이미지관련 플러그인 추가

//파일업로드
function customUploadAdapterPlugin(editor) { // uploadAdapter.js : upload 부분 수정(Base64 형식)
	editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
		return new UploadAdapter(loader, '<c:out value="${pageContext.request.contextPath}" />/ckImageUpload.do?folder1=ckeditor&folder2=contents')
	}
}

 

 

 

 

 

 

 

 

5. UploadAdapter.js 참고

class UploadAdapter {
	constructor(loader, url) {
		this.loader = loader;
		this.url = url;
	}
   upload() {
        var reader  = new FileReader();
    
        return new Promise( ( resolve, reject ) => {
            reader.addEventListener( 'load', () => {
                resolve( { default: reader.result } );
            });
    
            reader.addEventListener( 'error', err => {
                reject( err );
            });
    
            reader.addEventListener( 'abort', () => {
                reject();
            });                    
    
            this.loader.file.then( file => {
                reader.readAsDataURL( file );
            });                        
        })
    }
	abort() {
		if ( this.xhr ) {
			this.xhr.abort();
		}
	}
	_initRequest() {
		const xhr = this.xhr = new XMLHttpRequest();
		xhr.open('POST', this.url, true);
		xhr.responseType = 'json';
	}
	_initListeners(resolve, reject, file) {
		const xhr = this.xhr;
		const loader = this.loader;
		const genericErrorText = '파일을 업로드 할 수 없습니다. : '+file.name;

		xhr.addEventListener('error', () => {reject(genericErrorText)})
		xhr.addEventListener('abort', () => reject())
		xhr.addEventListener('load', () => {
			const response = xhr.response
			if (!response || response.error) {
				return reject( response && response.error ? response.error.message : genericErrorText );
			}
			resolve({
				default: response.url
			})
		})
	}
	_sendRequest(file) {
		const data = new FormData()
		data.append('upload',file)
		this.xhr.send(data)
	}
}

 

 

 

 

 

 

 

 

6. ckEditor 이미지 업로드 컨트롤러 controller 참고

/**
	 * CKEditor 에디터 이미지 업로드. 설정된 폴더 하위 editerImage 폴더에 업로드
	 */
	@RequestMapping("/ckImageUpload.do")
	@ResponseBody
	public String ckImageUpload(HttpServletRequest req, HttpServletResponse res, MultipartHttpServletRequest multipartRequest
			, @RequestParam HashMap<String, Object> param, @RequestParam Map<String, Object> commandMap, ModelMap model) {
		// 인자값 정리
		String folder1 = StringUtil.filePathReplaceAll(StringUtil.stripToEmpty(commandMap.get("folder1")));
		String folder2 = StringUtil.filePathReplaceAll(StringUtil.stripToEmpty(commandMap.get("folder2")));
		String folder3 = StringUtil.filePathReplaceAll(StringUtil.stripToEmpty(commandMap.get("folder3")));
		// 이미지업로드 폴더
		String editerImage = "editerImage";
		StringBuilder uploadPath = new StringBuilder();
		if (StringUtil.isNotEmpty(folder1)) {
			uploadPath.append(folder1);
			uploadPath.append(File.separator);
		}
		if (StringUtil.isNotEmpty(folder2)) {
			uploadPath.append(folder2);
			uploadPath.append(File.separator);
		}
		if (StringUtil.isNotEmpty(folder3)) {
			uploadPath.append(folder3);
			uploadPath.append(File.separator);
		}
		uploadPath.append(editerImage);
		String uploaded = "";
		String fileName = "";
		String url = "";
		String errorMsg = "";
		HashMap<String, Object> fileInfo = FileUtil.uploadOne(multipartRequest, "upload", SiiruUtil.getUploadPath()+uploadPath.toString(), "", 0, "bmp,gif,jpg,jpeg,png");
		if (StringUtils.equals("N", StringUtil.stripToEmpty(fileInfo.get("error")))) {
			if (StringUtil.isNotEmpty(fileInfo.get("fileSaveNm"))) {
				uploaded = "1";
				fileName = StringUtil.stripToEmpty(fileInfo.get("fileNm"));
				url = SiiruUtil.getContextPath()+"imageView/"+StringUtils.replace(uploadPath.toString(), File.separator, "|")+File.separator+StringUtil.stripToEmpty(fileInfo.get("fileSaveNm"));
			} else {
				uploaded = "0";
				errorMsg = "이미지 업로드 실패";
			}
		} else {
			uploaded = "0";
			errorMsg = StringUtil.stripToEmpty(fileInfo.get("errorMsg"));
		}
		HashMap<String, Object> resultMap = new HashMap<>();
		// 성공
		if (StringUtils.equals("0", uploaded)) {
			resultMap.put("message", errorMsg);
			resultMap.put("error", resultMap);
		}
		resultMap.put("uploaded", uploaded);
		resultMap.put("fileName", fileName);
		resultMap.put("url", url);
		model.addAttribute("resultMap", resultMap);
		return "jsonView";		
	}