인터넷에서 사용하는 일반적인 게시판에는 모두 게시판 에디터가 존재하는데요. 이를 구현하기 위한 jquery editor인 ckeditor 사용법에 대해 알아보겠습니다.
에디터의 장점
- 글을 쓰면서 상단에 글자의 폰트나 생상, 굵기, 정렬 등을 지정할 수 있음.
- 간편하게 이미지를 업로드 할 수 있음
- 이외에 기존 html 이용한 컨텐츠의 수정을 마우스 조작만으로 간편하게 가능
적용 파일 설치
ckeditor 공식사이트로 이동하여 구현에 필요한 js 파일들을 다운로드 받습니다.
상단의 Download 탭을 눌러 줍니다.
그러면 ckeditor 버전의 종류가 나오는데 맘에 드는 것을 선택 후 다운로드 버튼을 누릅니다.
다운 받은 압축 파일을 풀면 위와 같은 파일과 폴더가 나오게 되는데요
이를 이클립스 프로젝트에 복사해야 합니다.
저는 위와 같이 Webcontent에 resource에 모두 복사하였습니다.
ckeditor 사용법
<script src="resource/ckeditor.js"></script> <link rel="stylesheet" href="resource/samples/sample.css"> </head> <body> <textarea class="ckeditor" cols="1" id="editor1" name="editor1" rows="15"> </textarea> </body>
그리고 위와 같이 jsp페이지에 js와 css 그리고 textarea를 할당하는 코딩을 해줍니다.
그럼 ckeditor 적용이 끝나게 됩니다.
톰캣 서버를 시작하니 ekeditor가 정상적으로 적용된 모습입니다.
그리고 글자를 다양한 형태로 바꾸고 위의 소스형태로 보기를 클릭하면 html형태로 보여주는데요.
저장을 시키면 이런 소스코드 형태로 DB에 저장을 하게 됩니다.
답글 남기기