nahos

다음 에디터 다운로드 

https://github.com/kakao/DaumEditor/tree/gh-pages/download

7.4.x 버전이 사람들이 가장 많이 사용하고 있는듯

본인은 daumeditor-7.4.9.zip 파일을 다운 받아서 사용함.

첫번째로 압축을 해제하여 프로젝트에 폴더를 업로드 한다.

editor.html 파일을 실행시켜보면 다음에디터를 확인 할 수 있다.

다음에디터는 스마트 에디터와 다르기 때문에 html파일의 양이 많다.

긴 소스를 그대로 가져다가 사용하는 것은 비효율 적이라 생각하기때문에

editor.html 파일을 복사하여 다른 이름으로 저장을 한다.

php를 사용하면 editor.php

jsp를 사용하면 editor.jsp 와 같이

자신이 사용하는 언어에 맞게 이름을 지정하여 다른이름으로 저장을 한다.

우선 1 ~ 28 line 에 아래의 두개를 제외하고 지워 준다.8

 ( ' ?environment=development ' 부분도 지워준다 이 부분은 개발용이기 때문 )

두번째로 <div class="body">로 시작하는 29 line 부터 457 line 까지는 그대로 놔둔다.

( line은 정확하지 않을 수 있으나 대충 어디쯤인지 알수 있을 것이다. )

29 ~ 457 line 사이에 form 태그가 있다.

이 부분을 복사하여 에디터를 불러온 곳에서 사용하거나

자신의 form 태그를 사용 하면된다. (editor 파일에서는 지우도록한다.)

단 자신의 form 태그를 사용하는 경우는 아래에 script를 변경해야하니 그냥 복사해서 사용하는 것이 편하다.

(본인은 복사하여 action 만 변경하여 사용했음)

div 밑에 아래와 같은 script가 있는데 이 script 또한 그대로 놔둔다. 

이부분은 에디터으리 설정을 바꾸는 부분으로 필요에 따라 수정을 하고 지우지 않고 그대로 놔둔다 .

여기까지가 editor 파일에 대한 수정은 끝이며, 

위의 js 파일이나, css 파일, 이미지 파일같은 경우는 자신에 맞게 수정이 필요하다.

이제 실제로 에디터를 적용할 소스를 열어서 위에서 수정한 editor 파일을 불러오도록 한다. 

(제목, 이름 등... 미리 작성해 놓은 form 페이지) 

editor파일에서 복사해온 form 태그를 넣어주고, 

하단에 위에서 복사해서 다른곳에 저장해 놓았던 스크립트를 넣는다.

 <div><button onclick='saveContent()'>SAMPLE - submit contents</button></div>

스크립트 하단에 위와 같은 버튼이 있는데, 이 버튼이 전송하는 버튼이다.

saveContent()  함수가 글을 등록하는 함수이며,  validForm() 함수가 폼의 유효성을 체크하는 부분이다.

자신의 form에 맞게 validForm() 함수 부분에 유효성 체크하는 소스를 작성하면 된다.

마지막으로 setForm() 함수가 에디터 부분을 form으로 전송하는 필드를 생성하는 부분인데,

textarea.name = 'content'; 

중간에 위와 같은 부분의 content를 자신의 필드명으로 변경 해주면 된다.

위의 작업을 마치게 되면 다음 에디터가 정상적으로 작동하는 것을 확인 할 수 있다.

단 이부분은 에디터를 적용하고 전송만 하는 부분으로 이미지 첨부, 파일 첨부에 대해서는 수정이 필요하다.