CKEditor5 메뉴얼

CKEditor 이미지를 업로드 했을때 지정한 경로에 이미지를 저장하고 화면에 띄워주는 기능을 구현했습니다.

 

 

CKEditer

1. CKEditor 다운로드

 

2. ckEditorimageSample.js 생성

class ckEditorImageSample {
    constructor(loader) {
        this.loader = loader;
    }

    upload() {
        return this.loader.file.then( file => new Promise(((resolve, reject) => {
            this._initRequest();
            this._initListeners( resolve, reject, file );
            this._sendRequest( file );
        })))
    }

    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();
        xhr.open('POST', '<http://localhost:8081/vComponent/system/editor/editorImage.do>', true);
        xhr.responseType = 'json';
    }

    _initListeners(resolve, reject, file) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = '파일을 업로드 할 수 없습니다.'

        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 );
            }
            
            setTimeout(() => {
            resolve({
                default: response.result.url //업로드된 파일 주소
            })
            }, 5000);
            
           
            
        })
    }

    _sendRequest(file) {
        const data = new FormData()
        data.append('upload',file)
        this.xhr.send(data)
    }
}

 

3. EditorController 생성

private String getServerIp() {

		InetAddress local = null;
		try {
			local = InetAddress.getLocalHost();
		} catch (UnknownHostException e) {
			e.printStackTrace();
		}

		if (local == null) {
			return "";
		} else {
			String ip = local.getHostAddress();
			return ip;
		}
	}

	//CKEditor 이미지 업로드
	@RequestMapping(value = "/editorImage.do")
	public ModelAndView image(@RequestParam Map<String, Object> map, MultipartHttpServletRequest request)
			throws Exception {

		ModelAndView mv = new ModelAndView("jsonView");
		Map<String, Object> resultMap = new HashMap<String, Object>();
		String imageServerPath = null;	//서버경로
		String savePath= null;			//저장경로
		String originalImagename= null;	//원본이름
		String imageName= null;			//저장본이름
		String extension= null;			//확장자

		List<MultipartFile> imageList = request.getFiles("upload");

		for (MultipartFile mf : imageList) {
			if (imageList.get(0).getSize() > 0) {

				originalImagename = mf.getOriginalFilename(); // 원본 파일 명
				extension = FilenameUtils.getExtension(originalImagename);
				imageName = "img_" + UUID.randomUUID() + "." + extension;

				// ex)String path = "D:\\\\github\\\\src\\\\main\\\\webapp\\\\images\\\\";
				savePath = EgovProperties.getProperty("Globals.EditerImagePath"); // 서버가 가지고있는 프로젝트 경로로 지정해야합니다.

				File imageUpload = new File(savePath + imageName);
				try {
					mf.transferTo(imageUpload);
				} catch (IllegalStateException | IOException e) {
					e.printStackTrace();
				}
			}
		}

4. Editor 연결

<!-- CKEditor -->
<script src="<c:url value='/js/ckeditor5/build/ckeditor.js'/>"></script>
<script src="<c:url value='/js/ckeditor5/build/ckEditorImageSample.js'/>"></script>

<!--------------------------------------------------------- CKEditer ---------------------------------------------------------->				

<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
	<h6 class="m-0 font-weight-bold text-primary">CKEditer</h6>
</div>
<div class="card-body">
	<div id="quillEditor"></div>
		<div class="col-sm-12">
			<textarea class="form-control" rows="5" id="CKEditer" name="CKEditer" maxlength="1000" required="required"></textarea>
		</div>
	</div>
</div>

/********************************************************CKEditer********************************************************/
<script type="text/javascript">
	/*에디터 생성*/
	 ClassicEditor
    .create( document.querySelector( '#CKEditer'), {
    	extraPlugins: [MyCustomUploadAdapterPlugin],
		toolbar: { 		//사용 툴바
			items: [
				'heading',
				'|',
				'bold',
				'italic',
				'link',
				'bulletedList',
				'numberedList',
				'|',
				'outdent',
				'indent',
				'|',
				'imageUpload',
				'blockQuote',
				'insertTable',
				'mediaEmbed',
				'undo',
				'redo'
			]
		},
		language: 'ko', 
		licenseKey: '',
	} )
	.then( editor => {
		window.editor = editor; //에디터 선언
	} )
	.catch( error => {
		console.error( error );
	} );
	 
		function MyCustomUploadAdapterPlugin(editor) { //이미지 이벤트
		    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
		        return new ckEditorImageSample(loader);
		    }
		}
</script>

 

참고

CKEditor 5 - Download Latest Version

Auto-scaled, optimized and responsive images | Easy Image Uploader

CKEditor5 - Web Editor CKEditor5 이미지 업로드

 

 

개인적으로 정리한 내용을 간단하게 풀어 작성했습니다. 이해가 안가는 부분은 댓글 남겨주시면 설명해드리겠습니다.