22. 다음에디터 정리

짜잘한 팁들만 끄적끄적 올리는, 별 볼일 없는 이 블로그를 찾는 많은 사람들은 '다음에디터' 를 찾아오는 걸로 보입니다.

강좌처럼 적긴 했지만, 저만 이해할 수 있는, 상세하지 못한 글이어서 오히려 혼란을 주지않았나 걱정도 살짝 됩니다.

이번에 잠깐 다시 웹 사이트 하나 만들 일이 있어서 다음에디터 사용하게 되었는데, 그 덕에 다시 한번 정리를 해보려고 합니다.

(글 쓰는 동안 말투는 왔다갔다 할 수 있으니 양해바랍니다.)

1. 다음 에디터

다음에디터는 웹 페이지 상에서 글을 작성할 때, 단순 텍스트 문서 작성 이상을 할 수 있도록 해주는 위지윅 에디터이다.

폰트도 바꾸고, 크기도 바꾸고, 정렬도 할 수 있고, 표도 그려넣을 수 있고, 이미지 삽입도 가능하게 해 준다.

textarea 가 메모장이라면, 다음에디터를 장착하면 아래아한글이 되는거다.

daum 이 오픈소스로 풀어놔서 github에 가면 전체 소스를 다운 받아볼 수 있다. 사용하는 것도 내 맘대로다.

다운받을 수 있는 곳

https://github.com/daumcorp/DaumEditor

빨간 화살표가 가리키는 곳을 클릭하면 DaumEditor-master.zip 을 다운받을 수 있다.

다운받아서 압축을 풀어보면 아래의 구조를 가지고 있다.

여기서 실제 필요한 부분은 빨간 사각형으로 표시한 daumeditor 부분이다.

2. 준비되어 있어야 하는 것들

다음에디터에 관심이 있는 사람들은 손수 게시판을 만들고 있는 사람이거나, 기존 게시판에서 글 쓰기 환경을 다음에디터로 바꾸고자 하는 사람들일 것이다.

다음에디터는 그 게시판 기능 중, 글 쓰는 부분에 장착되는 녀석이니까, 기본적으로 게시판 관련 코드는 가지고 있다고 본다.

그 기본 코드는 내 블로그에 소개되어 있는 'PHP 게시판 만들기'의 간단한 소스들을 이용할 것이다.

다시 예전 소스를 다운받아서 몇가지 수정을 한 후, 다시 압축해서 올린다. 다음 에디터를 장착하기 전까지 완성된 버전이며, 이전 소스는 삭제를 했다.

 

www.zip

 

이 소스는 회원가입, 로그인, 로그아웃, 게시판 글목록보기, 글쓰기, 글 수정하기, 글 삭제하기 의 아주 기본적인 내용을 담고 있다.

실제 실행을 위해서 mySql 데이터베이스를 사용하는데, 압축 파일 내에 있는 webmaster.sql 을 이용하면 테스트를 위한 테이블을 만들 수 있다.

다운받아서 압축을 푼 후, 웹서버의 홈디렉토리 아래에 v2 라는 디렉토리를 만들고 그 안에 파일들이 들어가도록 업로드를 하자.

/user/내 아이디/www/v2/index.php

/user/내 아이디/www/v2/bbs/...

/user/내 아이디/www/v2/member/...

config.php 파일을 열어서 자신의 mySql 계정 정보로 수정해야한다.

http://도메인/v2/ 로 접속하면 최초 페이지에 접근할 수 있다.

내 컴퓨터에 APM 을 설치했다면, http://127.0.0.1/v2/ 로 접근할 수 있다.

회원가입도 해보고 로그인도 해보고, 게시판 글목록 보기, 글쓰기, 수정, 삭제 등 테스트를 우선 해보자.

모든게 잘 동작하면 본격적으로 시작할 수 있다.

아무런 문제가 없으면, ap_bbs, ap_member 테이블을 비워 초기화부터 하자.

그 다음, 회원가입을 다시 해서 아이디를 하나 만들고, 그 아이디로 로그인을 하자.

그리고, 나서 상단의 [게시판 글쓰기] 를 클릭하자.

현재 게시판 글쓰기는 위처럼 textarea 를 이용해서 내용 부분이 구현되어져있다.

우리는 이부분을 다음에디터로 변경을 할 것이다.

3. 합치기

다운받은 다음에디터 파일들 중에, 위에 빨간 사각형으로 표시한 부분의 daumeditor 디렉토리에 들어가 봅시다.

여기 보이는 모든 것을 v2/bbs/ 디렉토리에 업로드를 해 줍시다. converting.html 은 제외하죠.

웹브라우저로 bbs/editor.html 에 접근해 봅시다.

이렇게 잘 보이나요?

그럼, 아래 빨간 화살표가 가리키는 버튼을 눌러서 에디터에 샘플 컨텐츠를 넣어봅시다.

(처음 실행하니까, 이미지가 엑박으로 뜨던데, 다시 editor.html 을 로드하고 다시 클릭하면 위처럼 이미지가 제대로 보이네요.)

그럼, 그 위에 [SAMPLE - submit contents] 버튼을 클릭해봅시다.

첨부된 이미지 파일에 대한 설명이 하나뜨고, [확인]을 클릭하면 아래 화면이 나타납니다.

알려주는 주소로 접근해보면 아래 화면이 나타납니다.

중간부분부터 보이는 Post Params: 이하를 봅시다.

다음에디터에서 작성된 내용들이 POST 되었는데, 'content', 'attach_image', 'attach_file' 이라는 이름으로 그 값들이 전달되었음을 알 수 있습니다.

우리는 bbs/write.php 를 수정해서 editor.html 의 기능들을 추가해줘야겠네요.

editor.html 을 살펴봅시다.

문서편집기로 열어서 보면, 25,26번째 줄에 css 파일과 js 파일을 로드하는 부분이 보입니다. 아래의 빨간 사각형이 가리키는 부분이죠.

write.php 도 이 두 파일을 로드를 해야하니까, 이 두 줄을 복사해서 v2/header.php 에 적당한 위치에 붙여넣기를 합시다.

write.php 에만 필요한 내용이지만, header.php 에 넣어두는 바람에 다른 불필요한 파일에서도 로드를 하게될겁니다. 하지만, 지금은 무시하고 진행합시다.

아래는 header.php 입니다. 빨간 사각형 부분에 붙여넣기 한 후, 경로를 수정한 내용입니다.

write.php 를 위해서는 경로부분을 손데지 않아도 괜찮습니다.

혹시 다른 파일에서 접근할 경우를 생각해서 아래처럼 절대경로 지정해 주었습니다.

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

이제, write.php 를 봅시다.

현재 아래와 같은 모습인데, 라인 6부터 32까지 삭제를 합시다.

삭제된 곳에 다음에디터를 넣을 겁니다.

editor.html 에서

30번째 줄 <div class="body"> 부터 500번째 줄 </script> 까지 복사해서 write.php 의 삭제한 위치에 붙여넣기를 합시다.

아래는 editor.html 입니다.

...

변경된 write.php 를 첨부합니다.

write.php

editor.html 을 참고해서 header.php 와 write.php 를 수정했습니다.

그럼, 브라우저에서 v2/bbs/write.php 에 접근해봅시다.

이전에 textarea 였던 곳에 다음에디터가 나타났습니다.

사라진 제목 입력 부분과 글쓰기 완료 저장 버튼을 만들어 줍시다.

아래 위치에 다음 코드를 작성해서 제목 입력 부분을 만듭시다.

editor.html 에서 502번째 줄부터 578번째 줄까지 복사해서 write.php 의 481번째 줄에 붙여넣기를 합시다. 저장관련 코드와 버튼을 포함한 내용입니다.

여기까지의 write.php 입니다.

write.php

다시 브라우저로 write.php 에 접근해 봅시다.

제목 입력 부분과 submit 버튼이 생겼습니다. 버튼의 라벨은 write.php 에서 수정하면 되겠습니다. write.php 556번째 줄입니다.

제목과 글을 대충 입력하고 submit 버튼을 눌러봅시다.

아래처럼 나오면 알려주는 주소로 접근해 봅시다.

글쓰기에 입력한 내용이 글씨가 깨져보입니다. 아마 posttestserver.com 이 utf-8 인코딩으로 돌려주지 않는 것 같습니다.

어떤 브라우저가 되었든, 인코딩을 바꿔서 볼 수 있는 기능이 있으니 UTF-8 로 변경을 해 봅시다. 아래는 파이어폭스의 경우입니다.

인코딩을 바꿔서 한글이 제대로 보입니다.

subject 라는 key 로 '제목'이, content 라는 key 로 <p>입력한 내용입니다.<br></p> 가 잘 전달되었습니다.

이제 글쓰기에서 제대로 서버로 전달할 수 있다는 것을 확인했으니, 우리가 작업하고 있는 서버로 전달해서 DB에 저장할 수 있도록 수정을 해 봅시다.

write.php 12번째 줄을 보면, 현재는 submit 버튼을 눌렀을 때, 내용이 전달되는 곳이 posttestserver.com/post.php 입니다.

우리는 우리 상황에 맞게, 이것을 v2/write_check.php 로 수정을 해야합니다.

빨간 네모를 표시한 부분을 write_check.php 로 수정합시다.

예전 글을 다시 보니, 다음에디터에서 전송할 때, 입력한 내용의 key 가 tx_content 였었는데, 모르는 사이 content 로 바뀌었네요.

write_check.php 는 subject 와 content 를 받아서 DB에 저장하도록 이미 작성되어 있으니, 수정할 내용이 없습니다.

그럼, 테스트를 해 봅시다.

글을 적고 submit 버튼을 눌러봅시다.

글이 저장되었다는 메시지가 보이네요.

상단에 '게시판 글목록'을 클릭하니, 아래처럼 방금 작성한 글 제목이 보입니다.

제목을 클릭해서 내용을 확인하니 아래처럼 잘 나오는군요.

여기까지 다음에디터를 이식하기 위한 과정을 지난 번보다는 좀더 상세히 설명을 한 것 같습니다.

이미지 첨부나 파일 첨부 같은 기능은 업로더의 역할이 중요합니다. 다음엔 이부분도 좀 더 살펴볼 기회가 있으면 좋겠습니다.

여기까지 작업한 모든 내용이 담긴 파일입니다.

www_daumeditor.zip