민덕이의 개발노트 민덕이의 개발노트

이번 포스팅에서는 Ckeditor 이미지 업로드를 하려고한다. 필자는 스프링을 서버로 사용한다. 먼저 ckfinder를 추가한다. uploadUrl은 이미지 업로드 시 서버로 전송하는 url이다. ckfinder: { uploadUrl: '/ajax/image.do' }, Ckeditor 이미지 업로드는 서버에 이미지를 보내고 return 받기 전까지 base64를 이용하여 이미지를 보여주고 return 받을 때 base64 코드를 이미지 url로 변경해준다. 필자 서버 소스이다. return 할 때 uploaded와 url을 보내주면 이미지 업로드가 정상적으로 작동한다. 나머지 위에 코드는 이미지 저장하는 로직으로 참고만 하면 된다. 그리고 이미지 업로드는 기본적으로 다중 업로드가 가능하여 for문을 ..

이번 포스팅에서는 Ckeditor에서 글꼴을 추가하려고 한다. 기본적으로 윈도우에서 지원하는 기본 글꼴을 사용한다. 웹폰트나 다른 폰트를 다운로드 받아 사용하려면 css를 통하여 폰트를 추가 후 options에 폰트명을 추가한다. 간단함으로 이미지와 코드를 확인해서 추가하자. fontFamily: { options: [ 'default', 'Arial', '궁서체', '바탕', '돋움' ], supportAllValues: true } 정상적으로 글꼴이 추가되었다.

Ckeditor란 HTML 편집기 플러그인 이라고 생각하면 된다. 필자는 Ckeditor online builder를 사용하려고 한다. 먼저 해당 사이트(ckeditor.com/ckeditor-5/online-builder/) 에 접속한다. CKEditor 5 online builder | Rich text editor of tomorrow Create your own CKEditor 5 build with customized plugins, toolbar and language in 5 simple steps. Available rich text editor types are classic, inline, balloon, balloon block and decoupled document. ckedito..