'코드저장소/스마트에디터연동' 카테고리의 글 목록 IT Code Storage

/108

2014. 11. 25. 16:00

Spring3 MVC Restful방식으로 스마트에디터 연동(사진첨부 다중파일 포함) 해보기

스프링 MVC + 스마트에디터 연동은 기존 JAVA/JSP 버전의 연동방식과 별차이가 없습니다.

물어보시는 분들이 종종 계셔서 포스팅 해보도록 하겠습니다.

STS 의 Spring Project 를 생성하여 기본 MVC 구조잡기/파일처리/리소스경로에 대한 설정이 필요합니다.

해당 설정은 하단 포스팅을 참고해주세요.

기존 본인이 적용하고 계신 연동법이 존재한다면

하단 포스팅을 참고하지 않으셔도 되겠습니다.

2014/11/06 - [개발에필요한연동법/스프링연동] - STS 이클립스를 이용하여 UTF-8 인코딩 설정 및 Spring3 MVC 연동해보기

2014/11/06 - [개발에필요한연동법/스프링연동] - Spring3 한글깨짐 방지를 위한 UTF-8 인코딩 설정하기

2014/11/07 - [개발에필요한연동법/스프링연동] - Spring3 파일전송을 위한 multipartResolver 설정하기

2014/11/07 - [개발에필요한연동법/스프링연동] - Spring3 RESTFUL 방식 리소스파일 및 favicon 인식할수 있게 설정하기

Spring MVC 설정이 완료되었다면

스마트 에디터를 개발자센터에 가서 다운로드 받도록 합니다.

다운로드 관련 포스팅은 하단을 참고해주세요

2014/10/29 - [코드저장소/스마트에디터연동] - 네이버 스마트에디터 기본연동법 및 서버에 입력값 전송하기

에디터관련 파일다운로드까지 완료가 되었다면

본인의 /루트디렉토리/resource/editor/ 디렉토리 생성후

해당 파일들을 모두 INCLUDE 해놓도록 합니다.

디렉토리 경로 중 "/resource/" 부분은 Spring MVC 리소스경로 설정시 지정한 디렉토리명으로 지정해줍니다.

위처럼 include 작업이 완료되었다면

html 페이지 혹은 jsp 페이지를 생성하여 다음 코드를 진행하도록 합니다.

jQuery + 에디터관련JS파일을 include

1 2	`<script` `type="text/javascript"` `src="//code.jquery.com/jquery-1.11.0.min.js"></script>` `<script` `type="text/javascript"` `src="/resource/editor/js/HuskyEZCreator.js"` `charset="utf-8"></script>`

Body태그내에 작성할 샘플 HTML 코드

<!-- action : 에디터에 입력한 html 코드를 전달받을 Controller페이지 URL -->
<form action="/submit" method="post" id="frm">
    <textarea name="editor" id="editor" rows="10" cols="100" style="width:766px; height:412px;"></textarea>
    <input type="button" id="savebutton" value="서버전송" />
</form>

스마트에디터프레임 + 전송버튼클릭이벤트스크립트

$(function(){
    //전역변수
    var obj = [];               
    //스마트에디터 프레임생성
    nhn.husky.EZCreator.createInIFrame({
        oAppRef: obj,
        elPlaceHolder: "editor",
        sSkinURI: "/resource/editor/SmartEditor2Skin.html", 
        htParams : {
            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseToolbar : true,             
            // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseVerticalResizer : true,     
            // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
            bUseModeChanger : true, 
        }
    });
    //전송버튼
    $("#savebutton").click(function(){
        //id가 smarteditor인 textarea에 에디터에서 대입
        obj.getById["editor"].exec("UPDATE_CONTENTS_FIELD", []);
        //폼 submit
        $("#frm").submit();
    })
})

에디터 컨텐츠내용을 받을 /submit Controller

@RequestMapping("/submit")
public void submit(HttpServletRequest request){
    System.out.println("에디터 컨텐츠값:"+request.getParameter("editor"));
}

간단하게 실행 후 에디터에 테스트 내용 작성후

서버페이지에서 정상적으로 에디터 내용이 출력되는지 테스트를 해보도록 합니다.

위와같이 에디터가 출력되어 각각 입력 후 서버전송 버튼 클릭시

이클립스 콘솔창에 정상적으로 HTML 태그 + 컨텐츠 내용이 출력된 것을 확인하실수가 있습니다.

404 오류가 나는데 이부분은 무시하셔도 됩니다 ^^ㅋ

이어서 에디터 우측상단 사진버튼을 클릭하여

에디터내에 이미지 파일을 첨부해보도록 하겠습니다.

사진첨부기능은 싱글/멀티 파일업로드를 지원합니다.

단, IE9이하 버전에서는 싱글파일업로드만 지원하며

그외브라우저 및 IE10 이상부터는 드래그를 이용하여 다중파일업로드기능을 지원합니다.

"/resource/editor/photo_uploader/popup/photo_uploader.html"

form 태그가 존재합니다.

action="FileUploader.php" 의미가 없으므로 삭제해주시던가 "FileUploader.php" 값을 지워주도록 합니다.

"/resource/editor/photo_uploader/popup/attach_photo.js"

479번째 줄의 callFileUploader () 함수(단일사진첨부함수)를 보면

1 2	`sUrl : location.href.replace(/\/[^\/]$/,` `'') +` `'/file_uploader.php',` `//샘플 URL입니다.` `sCallback : location.href.replace(/\/[^\/]$/,` `'') +` `'/callback.html',` `//업로드 이후에 iframe이 redirect될 콜백페이지의 주소`

위코드를 다음처럼 재정의 해주도록 합니다.

1 2	`sUrl :` `'/photoUpload',` `//파일업로드시 동작되는 컨트롤러 url` `sCallback :` `'/resource/editor/photo_uploader/popup/callback.html',` `//업로드 이후 redirect 페이지 url`

이어서 333번째 줄의 html5Upload() 함수(다중사진첨부함수)를 보시면

1	`sUploadURL=` `'file_uploader_html5.php';` `//upload URL`

위코드를 다음처럼 변경해주도록 합니다

1	`sUploadURL=` `'/multiplePhotoUpload';` `//다중파일업로드 URL`

클라이언트 설정변경을 위와같이 모두 해주셨다면

이어서 서버페이지 코드작성을 해보도록 하겠습니다.

첨부파일을 받기위한 파일관련 VO 정의

public class PhotoVo {
    //photo_uploader.html페이지의 form태그내에 존재하는 file 태그의 name명과 일치시켜줌
    private MultipartFile Filedata;
    //callback URL
    private String callback;
    //콜백함수??
    private String callback_func;
 
    public MultipartFile getFiledata() {
        return Filedata;
    }
 
    public void setFiledata(MultipartFile filedata) {
        Filedata = filedata;
    }
 
    public String getCallback() {
        return callback;
    }
 
    public void setCallback(String callback) {
        this.callback = callback;
    }
 
    public String getCallback_func() {
        return callback_func;
    }
 
    public void setCallback_func(String callback_func) {
        this.callback_func = callback_func;
    }
}

단일사진첨부 컨트롤러

//단일파일업로드
@RequestMapping("/photoUpload")
public String photoUpload(HttpServletRequest request, PhotoVo vo){
    String callback = vo.getCallback();
    String callback_func = vo.getCallback_func();
    String file_result = "";
    try {
        if(vo.getFiledata() != null && vo.getFiledata().getOriginalFilename() != null && !vo.getFiledata().getOriginalFilename().equals("")){
            //파일이 존재하면
            String original_name = vo.getFiledata().getOriginalFilename();
            String ext = original_name.substring(original_name.lastIndexOf(".")+1);
            //파일 기본경로
            String defaultPath = request.getSession().getServletContext().getRealPath("/");
            //파일 기본경로 _ 상세경로
            String path = defaultPath + "resource" + File.separator + "photo_upload" + File.separator;              
            File file = new File(path);
            System.out.println("path:"+path);
            //디렉토리 존재하지 않을경우 디렉토리 생성
            if(!file.exists()) {
                file.mkdirs();
            }
            //서버에 업로드 할 파일명(한글문제로 인해 원본파일은 올리지 않는것이 좋음)
            String realname = UUID.randomUUID().toString() + "." + ext;
        ///////////////// 서버에 파일쓰기 ///////////////// 
            vo.getFiledata().transferTo(new File(path+realname));
            file_result += "&bNewLine=true&sFileName="+original_name+"&sFileURL=/resource/photo_upload/"+realname;
        } else {
            file_result += "&errstr=error";
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    return "redirect:" + callback + "?callback_func="+callback_func+file_result;
}

IE를 실행하여 단일업로드를 확인해보도록 하겠습니다.

※ 만약 IE10 이상이며 다중파일업로드 화면이 출력이 된다 하시면

attach_photo.js 파일의 38번째줄을 보시면 checkDragAndDropAPI() 함수내에 존재하는

1	`bSupportDragAndDropAPI =` `true;`

위처럼 true부분을 하단처럼 false로 변경해주도록 합니다.

1	`bSupportDragAndDropAPI =` `false;`

단일 사진첨부기능은 구현이 완료되었습니다.

이어서 HTML5 드래그앤드롭 기능을 이용한 스마트에디터 파일업로드 관련 컨트롤러를 작성해보도록 하겠습니다.

다중사진첨부 컨트롤러

//다중파일업로드
@RequestMapping("/multiplePhotoUpload")
public void multiplePhotoUpload(HttpServletRequest request, HttpServletResponse response){
    try {
         //파일정보
         String sFileInfo = "";
         //파일명을 받는다 - 일반 원본파일명
         String filename = request.getHeader("file-name");
         //파일 확장자
         String filename_ext = filename.substring(filename.lastIndexOf(".")+1);
         //확장자를소문자로 변경
         filename_ext = filename_ext.toLowerCase();
         //파일 기본경로
         String dftFilePath = request.getSession().getServletContext().getRealPath("/");
         //파일 기본경로 _ 상세경로
         String filePath = dftFilePath + "resource" + File.separator + "photo_upload" + File.separator;
         File file = new File(filePath);
         if(!file.exists()) {
            file.mkdirs();
         }
         String realFileNm = "";
         SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
         String today= formatter.format(new java.util.Date());
         realFileNm = today+UUID.randomUUID().toString() + filename.substring(filename.lastIndexOf("."));
         String rlFileNm = filePath + realFileNm;
         ///////////////// 서버에 파일쓰기 ///////////////// 
         InputStream is = request.getInputStream();
         OutputStream os=new FileOutputStream(rlFileNm);
         int numRead;
         byte b[] = new byte[Integer.parseInt(request.getHeader("file-size"))];
         while((numRead = is.read(b,0,b.length)) != -1){
            os.write(b,0,numRead);
         }
         if(is != null) {
            is.close();
         }
         os.flush();
         os.close();
         ///////////////// 서버에 파일쓰기 /////////////////
         // 정보 출력
         sFileInfo += "&bNewLine=true";
         // img 태그의 title 속성을 원본파일명으로 적용시켜주기 위함
         sFileInfo += "&sFileName="+ filename;;
         sFileInfo += "&sFileURL="+"/resource/photo_upload/"+realFileNm;
         PrintWriter print = response.getWriter();
         print.print(sFileInfo);
         print.flush();
         print.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

HTML5 다중파일업로드에 대한 실행을 해보도록 하겠습니다.

IE10이상 혹은 크롬/사파리등 기타 브라우저에서 실행을 해주세요

위와같이 드래그앤드롭기능을 이용한 다중사진업로드 기능구현이 완료되었습니다.

by 개발로짜

저작자표시 비영리 변경금지

'코드저장소 > 스마트에디터연동' 카테고리의 다른 글

네이버 스마트에디터 사진첨부기능을 이용하여 에디터에 이미지 추가하기+다중파일업로드 포함 (97)	2014.10.29
네이버 스마트에디터 기본연동법 및 서버에 입력값 전송하기 (8)	2014.10.29

/63

2014. 10. 29. 09:30

네이버 스마트에디터 사진첨부기능을 이용하여 에디터에 이미지 추가하기+다중파일업로드 포함

이전에 스마트 에디터 연동한 후 에디터에 작성한 내용을 서버에 전송하여 받는 내용에 관하여 포스팅을 했었습니다.

2014/10/29 - [코드저장소/스마트에디터연동] - 네이버 스마트에디터 기본연동법 및 서버에 입력값 전송하기

이어서 에디터 템플릿에 존재하는 사진첨부 기능을 이용하여 에디터내에 이미지 추가하는 기능에 대하여 포스팅 해보도록 하겠습니다.

물론, HTML5 를 이용하는 다중파일업로드까지 스마트에디터에서 구현이 되어있으므로

이부분 역시 작성하도록 하겠습니다.

프레임워크를 사용안하고 일반 jsp만을 이용하므로 별도의 라이브러리가 추가로 필요합니다.

Apache Commons FileUpload 라이브러리 다운로드페이지

http://commons.apache.org/proper/commons-fileupload/download_fileupload.cgi

위에 바이너리 zip 파일을 다운로드 받도록 합니다.

압축 해제 후 lib 디렉토리내에 존재하는 "commons-fileupload-1.3.1.jar"파일을

본인의 lib 디렉토리내에 라이브러리를 추가합니다.

Apache Commons IO 라이브러리 다운로드 페이지

http://commons.apache.org/proper/commons-io/download_io.cgi

Commons-io 라이브러리 역시 바이너리 zip 파일을 받도록 합니다.

단, Commons-IO 2.4 버전 다운로드를 받으실경우 JDK 1.6 이상일 경우

Commons-IO 2.2버전은 JDK 1.5 이상을 다운받으시면 되겠습니다.

역시 압축 해제 후 commons-io-x.x.jar 파일을 프로젝트내 lib 디렉토리내에 해당 라이브러리를 추가합니다.

크롬으로 진행시 자동으로 HTML5를 이용한 다중파일업로드 화면이 출력되므로

싱글업로드를 화면에 띄우기 위해서는 IE10이하에서 진행하시거나

/photo_uploader/popup/attach_photo.js 파일의

약 38번째 줄에 있는 checkDragAndDropAPI 함수내에

if(!!oNavigator.safari && oNavigator.version <= 5){
    bSupportDragAndDropAPI = false;
}else{
    bSupportDragAndDropAPI = true;
}

위와 같은 코드가 있습니다.

else 부분의 true 값을 false로 변경을 해주시면

크롬에서도 싱글파일업로드 구현이 가능합니다.

제일먼저 /photo_uploader/popup/photo_uploader.html 파일 열어보면

<form> 태그가 하나 존재하는데 action에 작성되어있는 url이 의미가 없습니다.

헷갈리지않게 action="FileUploader.php" 이부분을 제거합니다.

다음으로 /photo_uploader/popup/attach_photo.js 파일을 open 하신 후

코드를 보시면 479번째 라인에 callFileUploader 함수가 있습니다.

이 함수가 싱글파일업로드를 처리하는 함수입니다.

1 2	`sUrl : location.href.replace(/\/[^\/]$/,` `'') +` `'/file_uploader.php',` `//샘플 URL입니다.` `sCallback : location.href.replace(/\/[^\/]$/,` `'') +` `'/callback.html',` `//업로드 이후에 iframe이 redirect될 콜백페이지의 주소`

위 코드를 다음처럼 변경합니다

file_uploader.jsp 는 별도로 추가해주었고 callback.html 파일은

이미 smarteditor 코드내에 존재하므로

본인의 경로에 맞춰서 변경을 해주도록 합니다.

저는 제 환경에 맞춰 다음처럼 변경하였습니다.

1 2	`sUrl :` `'/file_uploader.jsp',` `//변경 URL입니다.` `sCallback :` `'/smarteditor/photo_uploader/popup/callback.html',` `//업로드 이후에 iframe이 redirect될 콜백페이지의 주소`

sUrl에 정의된 페이지는 파일업로드를 처리하는 URL이고

sCallback은 sUrl에서 파일처리한 다음 파일정보 return 해주는데

바로 이 return 값들을 callback.html에서 처리를 해주는 것입니다.

이어서 file_uploader.jsp 페이지를 구현해보도록 하겠습니다.

file_uploader.jsp 파일업로드 샘플코드

String return1="";
String return2="";
String return3="";
String name = "";
if (ServletFileUpload.isMultipartContent(request)){
    ServletFileUpload uploadHandler = new ServletFileUpload(new DiskFileItemFactory());
    //UTF-8 인코딩 설정
    uploadHandler.setHeaderEncoding("UTF-8");
    List<fileitem> items = uploadHandler.parseRequest(request);
    //각 필드태그들을 FOR문을 이용하여 비교를 합니다.
    for (FileItem item : items) {
        if(item.getFieldName().equals("callback")) {
            return1 = item.getString("UTF-8");
        } else if(item.getFieldName().equals("callback_func")) {
            return2 = "?callback_func="+item.getString("UTF-8");
        } else if(item.getFieldName().equals("Filedata")) {
            //FILE 태그가 1개이상일 경우
            if(item.getSize() > 0) {
                String ext = item.getName().substring(item.getName().lastIndexOf(".")+1);
                //파일 기본경로
                String defaultPath = request.getServletContext().getRealPath("/");
                //파일 기본경로 _ 상세경로
                String path = defaultPath + "upload" + File.separator;
                 
                File file = new File(path);
                 
                //디렉토리 존재하지 않을경우 디렉토리 생성
                if(!file.exists()) {
                    file.mkdirs();
                }
                //서버에 업로드 할 파일명(한글문제로 인해 원본파일은 올리지 않는것이 좋음)
                String realname = UUID.randomUUID().toString() + "." + ext;
                ///////////////// 서버에 파일쓰기 ///////////////// 
                InputStream is = item.getInputStream();
                OutputStream os=new FileOutputStream(path + realname);
                int numRead;
                byte b[] = new byte[(int)item.getSize()];
                while((numRead = is.read(b,0,b.length)) != -1){
                    os.write(b,0,numRead);
                }
                if(is != null)  is.close();
                os.flush();
                os.close();
                ///////////////// 서버에 파일쓰기 /////////////////
                return3 += "&bNewLine=true&sFileName="+name+"&sFileURL=/upload/"+realname;
            }else {
                return3 += "&errstr=error";
            }
        }
    }
}
response.sendRedirect(return1+return2+return3);

위처럼 jsp 코드를 구현 하였습니다.

JSP 페이지에 구현코드의 IMPORT 클래스들은 다음과 같습니다.

java.util.UUID
java.io.FileOutputStream
java.io.OutputStream
java.io.InputStream
java.io.File
java.util.List
org.apache.commons.fileupload.FileItem
org.apache.commons.fileupload.disk.DiskFileItemFactory
org.apache.commons.fileupload.servlet.ServletFileUpload

실행결과는 다음과 같습니다.

에디터 실행

파일업로드 팝업창

파일선택

파일선택완료

에디터 이미지 첨부 적용

이어서 HTML5를 이용한 다중파일업로드를 구현 해보도록 하겠습니다.

attach_photo.js파일에 약 333라인에 html5Upload 함수가 존재합니다.

1	`sUploadURL=` `'file_uploader_html5.php';` `//upload URL`

위 변수의 값을 본인이 작성하고자 하는 페이지명으로 정의해주시면 됩니다.

저같은 경우는

1	`sUploadURL=` `'/file_uploader_html5.jsp';` `//upload URL`

위와같이 값을 변경해주었습니다.

그럼 변경한 sUploadURL 변수에 대입한 페이지 URL에 대한 파일에 코드를 적용해보도록 하겠습니다.

file_uploader_html5.jsp 다중파일 업로드 샘플코드

String sFileInfo = "";
//파일명 - 싱글파일업로드와 다르게 멀티파일업로드는 HEADER로 넘어옴 
String name = request.getHeader("file-name");
String ext = name.substring(name.lastIndexOf(".")+1);
//파일 기본경로
String defaultPath = request.getServletContext().getRealPath("/");
//파일 기본경로 _ 상세경로
String path = defaultPath + "upload" + File.separator;
File file = new File(path);
if(!file.exists()) {
    file.mkdirs();
}
String realname = UUID.randomUUID().toString() + "." + ext;
InputStream is = request.getInputStream();
OutputStream os=new FileOutputStream(path + realname);
int numRead;
// 파일쓰기
byte b[] = new byte[Integer.parseInt(request.getHeader("file-size"))];
while((numRead = is.read(b,0,b.length)) != -1){
    os.write(b,0,numRead);
}
if(is != null) {
    is.close();
}
os.flush();
os.close();
sFileInfo += "&bNewLine=true&sFileName="+ name+"&sFileURL="+"/upload/"+realname;
out.println(sFileInfo);

실행결과는 다음과 같습니다.

※ 만약 싱글파일업로드 진행중 멀티파일 진행하시고자 사진버튼 클릭하였는데

싱글파일이 나오신다는 분들은 캐쉬문제일 가능성이 있으므로

새로고침 한번해주시면 되겠습니다.

다중파일 실행결과 입니다.

에디터 실행

다중파일업로드팝업창

파일드래그첨부

파일선택완료

다중파일 에디터 이미지 첨부적용

스프링 관련 에디터 연동 포스팅은 다음에 진행하도록 하겠습니다 .

by 개발로짜

저작자표시 비영리 변경금지

'코드저장소 > 스마트에디터연동' 카테고리의 다른 글

Spring3 MVC Restful방식으로 스마트에디터 연동(사진첨부 다중파일 포함) 해보기 (13)	2014.11.25
네이버 스마트에디터 기본연동법 및 서버에 입력값 전송하기 (8)	2014.10.29

/62

2014. 10. 29. 09:00

네이버 스마트에디터 기본연동법 및 서버에 입력값 전송하기

이번 포스팅은 대표적으로 자주 이용하는 무료 웹에디터 툴중에 하나인

네이버 스마트에디터에 대한 기본 연동법에 대하여 포스팅 하고자 합니다.

제일먼저 에디터파일을 받도록 합니다.

http://dev.naver.com/projects/smarteditor/download

사이트 접속시 다음과 같이 버전별 에디터 목록이 나옵니다

저같은 경우는 제일 최신으로 등록된 버전을 기준으로 진행을 하겠습니다.

목록을 클릭하여 들어가시면 상단에 다운로드버튼이 존재하는데

클릭하여 파일을 다운로드 받도록 합니다.

저는 포스팅 날짜기준 "SE2.3.10.O11329.zip" 파일을 다운받았습니다.

압축해제 후 다음 파일들을 모두 본인의 프로젝트에 맞추어 include해줍니다.

저는 개인적으로 별도의 "smarteditor" 디렉토리 생성하여 해당 폴더에 통째로 붙여넣기 하였습니다.

스마트 에디터를 적용하기 위해서는 HTML의 textarea 태그가 필요합니다.

index.html 파일에 하단 코드 작성하였습니다.

INCLUDE 파일

1 2	`<script` `type="text/javascript"` `src="//code.jquery.com/jquery-1.11.0.min.js"></script>` `<script` `type="text/javascript"` `src="/smarteditor/js/HuskyEZCreator.js"` `charset="utf-8"></script>`

에디터 샘플 html 코드

<form action="/send.jsp" method="post" id="frm">
    <textarea name="smarteditor" id="smarteditor" rows="10" cols="100" style="width:766px; height:412px;"></textarea>
    <input type="button" id="savebutton" value="서버전송" />
</form>

에디터 관련 스크립트 코드

$(function(){
    //전역변수선언
    var editor_object = [];
     
    nhn.husky.EZCreator.createInIFrame({
        oAppRef: editor_object,
        elPlaceHolder: "smarteditor",
        sSkinURI: "/smarteditor/SmartEditor2Skin.html", 
        htParams : {
            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseToolbar : true,             
            // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseVerticalResizer : true,     
            // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
            bUseModeChanger : true, 
        }
    });
     
    //전송버튼 클릭이벤트
    $("#savebutton").click(function(){
        //id가 smarteditor인 textarea에 에디터에서 대입
        editor_object.getById["smarteditor"].exec("UPDATE_CONTENTS_FIELD", []);
         
        // 이부분에 에디터 validation 검증
         
        //폼 submit
        $("#frm").submit();
    })
})

위 코드를 차례대로 보시겠습니다.

smarteditor 연동 제공해주는 HuskyEZCreator.js 파일과 jQuery CDN을 이용한 예제입니다.

1. nhn.husky.EZCreator.createInIFrame 명령어를 이용하여 에디터를 iframe을 이용하여 화면에 띄워줍니다.

2. textarea와 패키지개념이긴 하나 실질적으로 별개의 프레임입니다.

elPlaceHolder 속성값에는 연결지을 textarea의 id명을 정해줍니다.

sSkinURI 속성값에는 에디터스킨 html파일 경로를 지정해줍니다

3. 마지막으로 전송버튼시 editor_object라는 배열변수를 이용하여 smarteditor id값을 가진 textarea폼에 에디터스킨에서 입력한 html내용들을 대입시킵니다.

editor_objet 변수를 전역변수로 선언한 이유는 이와같이 클립이벤트 공통으로 에디터객체 핸들링을 위하여 선언하였습니다.

위 3가지에 대한 부분이 주요 설명입니다.

그리고 form submit을 할때 정해준 action url페이지인 send.jsp 페이지내에 코드는 다음과 같습니다.

send.jsp 코드

//한글 인코딩을 위한 UTF-8 설정
request.setCharacterEncoding("utf-8");
out.println("에디터 결과");  
out.println(request.getParameter("smarteditor"));

에디터 로딩 페이지와 전송된 갑이 올바르게 넘어가는지 해당 소스를 실행해보도록 하겠습니다.

최초 로드 화면

send.jsp 전송값 확인

화면상 내용만 출력되었지만 소스보기 결과 정상적으로 에디터에 작성된 태그가 적용된것을 확인 할 수 있었습니다.

by 개발로짜

저작자표시 비영리 변경금지

'코드저장소 > 스마트에디터연동' 카테고리의 다른 글

Spring3 MVC Restful방식으로 스마트에디터 연동(사진첨부 다중파일 포함) 해보기 (13)	2014.11.25
네이버 스마트에디터 사진첨부기능을 이용하여 에디터에 이미지 추가하기+다중파일업로드 포함 (97)	2014.10.29

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Spring3 MVC Restful방식으로 스마트에디터 연동(사진첨부 다중파일 포함) 해보기

네이버 스마트에디터 사진첨부기능을 이용하여 에디터에 이미지 추가하기+다중파일업로드 포함

네이버 스마트에디터 기본연동법 및 서버에 입력값 전송하기

jQuery + 에디터관련JS파일을 include

Body태그내에 작성할 샘플 HTML 코드

스마트에디터프레임 + 전송버튼클릭이벤트스크립트

에디터 컨텐츠내용을 받을 /submit Controller

"/resource/editor/photo_uploader/popup/photo_uploader.html"

"/resource/editor/photo_uploader/popup/attach_photo.js"

첨부파일을 받기위한 파일관련 VO 정의

단일사진첨부 컨트롤러

다중사진첨부 컨트롤러

'코드저장소 > 스마트에디터연동' 카테고리의 다른 글

Apache Commons FileUpload 라이브러리 다운로드페이지

Apache Commons IO 라이브러리 다운로드 페이지

file_uploader.jsp 파일업로드 샘플코드

file_uploader_html5.jsp 다중파일 업로드 샘플코드

'코드저장소 > 스마트에디터연동' 카테고리의 다른 글

INCLUDE 파일

에디터 샘플 html 코드

에디터 관련 스크립트 코드

send.jsp 코드

'코드저장소 > 스마트에디터연동' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역