[ckeditor5] ckeditor5 jsp, html, javascript 참고 코드

1. js import

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

 

 

2. html textarea

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

 

 

3. javascript 

// 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','|']},
			language:'ko',
			image:{toolbar:['imageTextAlternative','imageStyle:full','imageStyle:side']},
			table:{contentToolbar:['tableColumn','tableRow','mergeTableCells','tableCellProperties','tableProperties']},
			extraPlugins:[customUploadAdapterPlugin]
		}).then(editor => {
			ckEditor = editor;
			//console.log(editor.ui.componentFactory.names()); 사용가능한 툴바 확인 names > GeneratorReceiver > _components
	});

 

 

4. extraPlugins

//파일업로드
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=000')
	}
}