스프링 CKEditor 적용 - 에디터
2018.03.07 21:03
스프링 CKEditor 적용 - 에디터
* Smart Editor, WYSIWYG Editor(위지윅 에디터, what you see is what you get)
- 사용자가 현재 화면에서 보고 있는 내용과 동일한 html code를 생성하는 에디터
- 네이버, 다음 에디터, CKEditor, SummerNote 등
* CKEditor
- Standard Package 다운로드
- 이미지 업로드를 위해서는 별도의 작업이 필요함
- 적용 예
* SummerNote
- 이미지를 텍스트 형식으로 저장함, 이미지 링크 방식의 업로드를 위해서는 별도의 작업이 필요함
- 적용 예
1. ckeditor 를 인식할 리소스를 설정한다. 예
<!-- ckeditor 리소스 설정 -->
<resources mapping="/ckeditor/**" location="/WEB-INF/views/ckeditor/" />
2 .
viw 페이지에서 자바스크립트 삽입
<!-- ckeditor 연결 -->
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<table>
<tr>
<td>내용</td>
<td class="span12">
<textarea rows="5" class="form-control" name="content"></textarea>
<!-- textarea 를 ckeditor 로 변경 시킴 -->
<script>
CKEDITOR.replace("content", {
filebrowserUploadUrl :"/imageUpload.do"
// filebrowserImageUploadUrl: 'MacaronicsServlet?command=ckeditor_upload'
});
</script>
</tr>
<table>
3. 이미지 파일을 받을 컨트롤러를 따로 작성한다.
@Controller
public class CkeditorUploadController {
@RequestMapping(value="/imageUpload.do")
public void imageUpload(HttpServletRequest request, HttpServletResponse response,
@RequestParam MultipartFile upload ) throws Exception{
//CKEditor 에서 파일을 넘겨주는 이름이 upload 로 설정 되어 있다. 반드시 upload 로 설정
//헤더 설정
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=utf-8");
OutputStream out =null;
PrintWriter printWriter =null;
String fileName =upload.getOriginalFilename(); //첨부 파일 이름
byte[] bytes =upload.getBytes(); //첨부파일을 바이트 배열로 저장
//String uploadPath ="업로드할 디렉토리 경로" + fileName; //물리적 실제 저장소
String uploadPath =UploadPath.path(request) +fileName;
out=new FileOutputStream(new File(uploadPath));
out.write(bytes); //서버에 파일 업로드
String callback =request.getParameter("CKEditorFuncNum");
printWriter=response.getWriter();
//URL 상에서 볼수 있는 이미지 경로
// String fileUrl =request.getContextPath()+"/upload/"+ fileName;
String fileUrl ="/resources/upload/"+ fileName;
String script="<script>window.parent.CKEDITOR.tools.callFunction(";
script +=callback;
script +=", '";
script +=fileUrl;
script +=" ' , '이미지를 업로드 했습니다.'";
script +=") </script>";
printWriter.println(script);
printWriter.flush();
}
}
public class UploadPath {
public static String attach_path="resources/upload/";
public static String path( HttpServletRequest request){
String uploadPath ="/";
try{
String root_path =request.getSession().getServletContext().getRealPath("/");
uploadPath=root_path+attach_path.replace('/', '\');;
return uploadPath;
}catch(Exception e){
e.printStackTrace();
return uploadPath;
}
}
}
4. CKEditor 옵션
<!-- html 변경 샘플 ex) -->
CKEDITOR.replace( 'contents', {//해당 이름으로 된 textarea에 에디터를 적용 <-- 이거 이름 부분입니다.
width:'100%',
height:'600px',
// extraPlugins : 'youtube',
//여기 경로로 파일을 전달하여 업로드 시킨다.
// JSP, PHP 공통입니다. 경로를 적당히 적어줍니다.
filebrowserImageUploadUrl: '/user/modify/upload_receive_from_ck'
});
<!-- CkEdior 에서 config.js 변경 예 -->
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
//1.모양을 적용하기 위해 위젯 설치
//먼저 lineutils 와 widgetselection 설치
config.extraPlugins = 'widget';
//먼저 widget 설치 부트스트랩 용
config.extraPlugins = 'btgrid';
//부트스트랩 용
config.extraPlugins = 'widgetbootstrap';
/* // Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
*/
//코드 hightler
config.extraPlugins = 'codesnippet';
//config.extraPlugins = 'youtube';
};
[출처] http://macaronics.net/index.php/m01/java/view/143
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
