CKEditor나 SmartEditor 같은 게시판에 글 쓰기 위한 에디터에 사진을 첨부하려면

Question

Sping MVC 패턴과 jsp 기반으로 게시판을 만들고 있습니다.CKEditor나 SmartEditor 같은 에디터를 이용하여 이미지 파일을 업로드하고 첨부하는 게시판을 만들고 싶은데요. 인터넷의 예제를 아무리 따라해도 잘 되질 않네요..CKEditor는 전혀 모르겠고...스마트에디터는 인터넷 예제를 따라하고 나니, 첨부파일을 업로드 할 수 있게 한듯한데,, 막상 첨부하고 확인버튼을 누르면, 이미지가 엑박으로 떠서 오류메세지를 확인하면 지정된 경로에 이미지 파일을 찾을 수 없다고 나오네요.스마트에디터 자체에 파일을 지정된 서버폴더에 업로드 하는 기능이 있나요? 아니면 업로드 부분을 따로 구현해줘야 하나요?? 가능하다면 MVC에 JSP 기반으로 만들어진 사진첨부 가능한 게시판을 구현해 놓으신 예제를 보내주실 수는 없을까요..? 메일은 kbj0109&#64;gmail.com 입니다.. 실력이 부족해 안되는 정확한 원인을 찾기도 어려워 이렇게나마 질문할 수 없어 죄송합니다..조언해주시면 감사하겠습니다 ㅠ

cuyanam · Answer

안녕하세요 미미하지만 도움이 되길바라며 적습니다. 저도 스프링 mvc 기반 프로젝트 게시판의 글 쓰기 양식 페이지에 ck에디터를 도입해본 경험이 있습니다. 구현할 당시 파일업로드 클라이언트 사이드는 이미지파일 url주소를 직접 입력해야만 에디터 창에 삽입할 수 있는 방식이었습니다. 파일업로드 무료소스를 찾아도 안나오더군요 그래서 결국 파일 업로드를 기능을 서버에 따로 구현했습니다. 그리고 클라이언트쪽은 ck editer 그 대화상자 테마를 그대로 가져가려고 파일업로드를 누르면 나오는 인터페이스 창에 tab을 한개 더 두고 서버업로드 패널을 따로 구현했습니다. 클라이언트쪽은 작성자분 본인이 직접 ui element 만들고 하셔도 됩니다. 로직은 대강 이러합니다. 파일업로드클릭 -> 윈도우 파일브라우져에서 파일선택 -> 업로드버튼 클릭-> 서버에 파일업로드 (서버 저장소에 저장후 db 레코드 삽입) -> 완료가 됐다면-> 현재 글 textarea에 업로드한 사진의 url주소와 함께 image element를 만들어 끼워넣기 이런식으로해서 게시판 레코드의 내용 필드에는

내용

이런식으로 들어가게끔하는 것입니다. ps.소스는 찾게되면 메일로 보내드리겠습니다

팥빙수 · Answer

cuyanam // 친절한 설명 감사드립니다. 말씀해주신 것 만으로도 대충 그런 방향으로 한번 더 도전해봐야겠다는 생각이 드네요. 혹시라도 예제를 찾게 된다면 kbj0109&#64;gmail.com으로 보내주시면 감사하겠습니다.

더미 · Answer

파일업로드는 당연히 서버에 구현해야합니다

cuyanam · Answer

예전에 구현했던 코드가 있긴한데 복잡해서 알려드리기도 어렵고 다시보니 저도 이해하기 힘드네요ㅜㅜ 대신 네이버 스마트 에디터쪽은 비교적 자료가 좀 있는 듯 합니다. http://hellogk.tistory.com/108 여기 참고하시면서 분석해 보시면 될 듯 해요 스마트에디터가 웹 서버에 파일업로드를 요청할 때 어떤 규칙으로 데이터를 주고, 결과를 받는지 이해하시면서 코드에 반영하시면 될 것 같습니다. 처음하시는거라 시간은 조금 걸리겠지만 어렵게 생각하지 마시고 규칙에 맞춰 따라가시면 충분히 할 수 있을 겁니다

팥빙수 · Answer

//cuyanam 그 포스팅을 처음부터 봤지만... 여전히 제 실력부족으로 구현이 안되는 듯 합니다..;;예전에 있었던 프로젝트를 보내주실 수는 없을까요? 코드를 뜯어보면 제가 배울 수 있는게 있지 않을까요.. ㅠㅠ DB가 없으면 실행조차 안되는 구조인가요?

CKEditor나 SmartEditor 같은 게시판에 글 쓰기 위한 에디터에 사진을 첨부하려면

5개의 답변

#smarteditor 목록