20. 위지윅 에디터 붙이기 - 다음에디터

게시판 기능 구현해보면서, 글 입력받는 부분에 textarea 를 이용했었습니다.

그래서 텍스트만 입력가능하죠. 효과도 줄 수 없구요.

그 부분을 보다 풍성한 효과로 글 작성이 가능하도록 위지윅 에디터를 장착해 보겠습니다.

다음 에디터 Daum Editor

무료로 사용할 수 있는 위지윅 에디터가 몇개 있습니다만, 다음에서 오픈소스로 풀어놓은 '다음에디터'를 이용할 계획입니다.

구글코드에서 오픈으로 작업하다가 github 으로 이사를 했네요.

주소는 아래와 같습니다.

https://github.com/daumeditor/DaumEditor

또 이사를 했네요.

https://github.com/daumcorp/DaumEditor

우선 소스 다운로드를 받읍시다.

다운 받은 파일을 압축해제하면 아래와 같은 디렉토리 구조를 가지고 있음을 볼 수 있습니다.

저기서 daumeditor 디렉토리 아래의 4개 디렉토리를 우리가 작업했던, bbs 디렉토리 아래에 업로드를 합니다.

daumeditor 디렉토리 안에 있는 editor.html 을 살펴봅시다. 이 파일이  설치 매뉴얼이나 다름없습니다.

write.php를 수정하겠습니다.

preset.php 와 header.php 를 포함시키는 부분과 footer.php 를 포함시키는 부분 사이에 있는 모든 내용을 삭제합니다. 새로 시작하는것이나 마찬가지군요.

글쓰기<br /> 이정도 적어주고, 그 뒤에다 editor.html 30번째 줄부터 499번째 줄까지 가져와 붙여넣기 합니다. div class="body" 부분 전부와 샘플에 필요한 자바스크립트를 제외한 모든 코드입니다.

그리고, 26,27번째 라인 두 줄을 header.php 에 가서 붙여넣고 경로 수정을 합시다.

<link rel="stylesheet" href="http://<?php echo $_SERVER['HTTP_HOST']; ?>/bbs/css/editor.css" type="text/css" charset="utf-8"/>
    <script src="http://<?php echo $_SERVER['HTTP_HOST']; ?>/bbs/js/editor_loader.js?environment=development" type="text/javascript" charset="utf-8"></script>

loader 에 붙은 environment=development 값은 삭제합니다.

header.php 에 넣는 바람에 불필요하게 포함되는 경우가 생길 수도 있지만, 지금은 그냥 무시합시다. ㅎㅎ

이 정도하고, 브라우저로 접근해봅시다.

일단 모양은 제대로 나오는군요.

제목을 입력받는 부분 하나 만들어주고, 글쓰기 submit 버튼도 만들어 줍시다.

<div id="input-subject-box">
                제목 : <input type ="text" name = "subject" size ="90">
</div>

내용 전송하는 부분은 editor.html 파일을 좀 살펴봐야겠습니다.

501~579 라인이 작성내용을 전송하는 방법입니다.

그 부분의 코드를 모두 복사해서 write.php 의 적당한 부분에 붙여넣기를 합시다.

<!-- 에디터 끝 --> 뒤에 붙여넣기 하면 되겠네요.

'submit contents' 라는 버튼이 하나 생기네요.

이 버튼을 클릭하면, saveContent() 함수가 실행됩니다.

소스에 보면 이 함수는 Editor.save(); 를 실행하는 군요.

이 함수가 실행되는 동안, 내부적으로 폼에 입력된 값의 유효성을 검사하는 루틴이 실행되는데 그 설정을 validForm()과 setForm() 함수를 이용해서 할 수 있습니다.

현재 submit 을 하면 받을 파일이 http://posttestserver.com/post.php 로 설정이 되어있습니다. 실제 submit 을 하면 POST 결과에 대한 내용을 리포트로 볼 수 있네요.

제목에 '테스트 제목', 내용에 '테스트 내용' 이라고 해서 submit 을 해보니 아래와 같이 리포트를 해 주네요.

Post Params:

key: 'subject' value: '테스트 제목'

key: 'tx_content' value: '<p>테스트 내용</p>'

Empty post body.

추가한 제목까지 전송은 제대로 되는군요.

그럼, 폼의 action을 bbs 구현시 만들었던, write_check.php 로 변경을 하고 테스트를 해 보겠습니다.

write_check.php에서 예전에는 subject 와 content를 받아 DB에 기록했었는데, content가 아니라, tx_content 로 바꾸어야겠습니다.

$q = "INSERT INTO ap_bbs (member_idx, subject,content,reg_date) VALUES('$member_idx', '$subject', '$tx_content', '$reg_date')";

헐! 캡쳐하고 보니, 다음에이터군요..ㅋㅋ 그냥 고고~

위처럼 작성해서 submit을 했더니, 정상적으로 수행이 되었습니다.

그럼, DB에는 어떻게 저장이 되었을까요?

<p>글도 써보고, <span style="color: rgb(255, 0, 0);"><strong>색깔</strong></span>도 넣어보고</p><p>엔터도 쳐보고, </p><p><table style="border: currentColor; font-family: 굴림; font-size: 10pt; border-collapse: collapse;" class="txc-table" border="0" cellSpacing="0" cellPadding="0" width="664"><tbody><tr><td style="border: 1px solid rgb(204, 204, 204);">표도 하나 넣어보고&nbsp;</td> </tr> </tbody></table></p><p>&nbsp;</p>

이렇게 저장되었습니다.

list.php로 가서 방금 쓴 글을 클릭해서 내용보기를 해 봤습니다. 아래와 같이 잘 나오는군요.

여기까지, 다음에디터를 게시판 글 쓰기 부분에다 붙여봤습니다.

정리해보면,

editor.html 에서 해당코드를 그대로 가져다가 사용하면 잘 된다..였습니다. ㅎㅎ

먼가 빠진거 같죠? 사진, 파일 첨부에 대해서 다시 이어서 살펴보겠습니다.

오늘은 여기까지입니다. ㅎㅎ