CK editor5 내용을 전송하는 법

id를 editor 로 갖는 textarea에 name만 글내용을 전송할 객체이름과 맞춰주면 전송될 거 같긴 한데

해보니까 안되서 그냥 수동으로 설정한다.

페이지 하단의 스크립트에 다음과 같이 작성한다.

 

<script>
	let editor;
    ClassicEditor
        .create( document.querySelector( '#editor' ),{
        	language:'ko',
        	removePlugins: [ 'outdent', 'indent'],
        	toolbar: [ 'bold', 'italic','BlockQuote', 'undo', 'redo' ]
        
        } )
        
        .then(editor => {
        	const content = editor;
        	console.log()
        	$('.ck-content').keyup(
        			function(e) {
        				$( "input[name='bd_content']" ).val(content.getData());
        				console.log("[bdcontent "+"val] : "+ $("input[name='bd_content']").val());
        				});
        			}
        )
        
        .catch( error => {
            console.error( error );
        } );
	</script>

CK editor5는 .getData()함수를 제공한다.

실제 삽입되는 에디터의 입력창은 class명이 매우 긴데, ck-content 라는 이름을 갖고 있음.

삽입하려는 input폼을 선택자로 지정해주고 value값에 getData() 함수를 써주면

console.log 사용시 콘솔에 나오기 시작한다.

 

난 실시간으로 입력값이 받아지는지 보려고 Jquery의 keyup()함수를 사용했다.

 

※ 에디터의 툴바 플러그인과 툴바 메뉴도 설정할 수 있는데, 상세하게는 못하고(오류가 나서)

필요한 기능만을 정했다.