'다음에디터'에 해당되는 글 3건

  1. 2013.09.25 22. 다음에디터 정리 (26)
  2. 2012.12.19 21. 위지윅 에디터 붙이기 - 다음에디터 두번째 (9)
  3. 2012.12.18 20. 위지윅 에디터 붙이기 - 다음에디터 (10)

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

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


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

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


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








Posted by 똑똑한 영장류


이전 글에서 다음에디터를 붙여서 게시판 글쓰기 부분을 수정해봤습니다.

그 부분에서 빠져 있는 사진 삽입과 파일 첨부를 살펴보겠습니다.


로그인을 하고 bbs/list.php에 접근해서 글 쓰기 버튼을 클릭합시다.

아! list.php 에 글쓰기 버튼을 달아놓지 않았군요.


<div class="btn-area">
    <a href="http://<?php echo $_SERVER['HTTP_HOST'];?>/bbs/write.php" class="btn">글쓰기</a>
</div>



글쓰기 화면으로 가서 왼쪽 위의 사진 아이콘을 클릭해봅시다.




사진 첨부를 위한 새로운 창이 뜹니다.


bbs/pages/trex/image.html 파일이 나타나는 군요. 또 소스를 들여다 봐야겠습니다.


예제로 확인버튼을 누르면 첨부할 이미지의 정보를 에디터로 넘기고, 에디터에 표시되도록 해놓았네요.


이미지 파일을 업로그하는 내용은 없군요.


업로드 기능을 구현하고, 업로드한 파일의 정보를 예제에 있는 함수를 통해 에디터로 넘겨야 할 거 같습니다.


업로드 기능은... 또 다른 이야기네요.. 하나 더 해야되는구나...ㅡ.ㅡ


악~! 여기 이후로 작성한 거 다 날아갔네요..ㅡ.ㅡ

설명이 부실해질겁니다.ㅡ.ㅡ




trex/image.html 파일을 열어서 적당한 곳에 아래 코드를 넣읍시다.



<form method="post" enctype="multipart/form-data" action="../../image_uploader.php">

<input type="file" name="upload_file">

<input type="submit" value="업로드">

</form>



찾아보기, 업로드 버튼이 생깁니다.


컴퓨터에 있는 이미지를 선택하고 업로드를 하면, 받아서 처리할 녀석이 있어야겠지요.

www/bbs/ 아래에 image_uploader.php를 하나 만듭시다.


아래 코드로 시작합시다.

<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/preset.php';
?>
<?php
$file_name = $_FILES['upload_file']['name'];
$tmp_file = $_FILES['upload_file']['tmp_name'];

$file_path = $path['root'].'files/'.$file_name;
$image_url = $url['root'].'files/' . $file_name;

$r = move_uploaded_file($tmp_file, $file_path);

$file_size = $_FILES["upload_file"]["size"];
?> 


쉽게 찾아볼 수 있는 파일 업로드 관련 코드입니다.

www/files 라는 곳에 업로드를 합니다. 테스트해서 잘 되는지 일단 확인하세요.


그럼, 이렇게 서버쪽으로 넘어온 이미지를 다음에디터에 정보를 넘겨줘서 편집하고 있는 화면에 삽입을 할 수 있어야겠네요.


trex/image.html 에 정보는 다 있습니다.


위 코드 아래에 에디터와 교신을 할 부분을 작성합시다.



<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>image_uploader.php</title>
<script src="./js/popup.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./css/popup.css" type="text/css"  charset="utf-8"/>
<script type="text/javascript">
// <![CDATA[
   
    function initUploader(){
           
        var _opener = PopupUtil.getOpener();
        if (!_opener) {
            alert('잘못된 경로로 접근하셨습니다.');
            return;
        }
       
        var _attacher = getAttacher('image', _opener);
        registerAction(_attacher);
           
            if (typeof(execAttach) == 'undefined') { //Virtual Function
            return;
        }
       
        var _mockdata = {
            'imageurl': '<?php echo $image_url; ?>',
            'filename': '<?php echo $file_name; ?>',
            'filesize': <?php echo $file_size; ?>,
            'imagealign': 'C',
            'originalurl': '<?php echo $image_url; ?>',
            'thumburl': '<?php echo $image_url; ?>'
        };
               
        execAttach(_mockdata);
        closeWindow();
               
    }
// ]]>
</script>
</head>
<body onload="initUploader();">

</body>
</html> 



trex/image.html 에 있던 initUploader()와 done()을 합치고, 다음에디터로 넘겨줄 이미지 관련 정보를 php로부터 가져와 세팅을 해 줬습니다.


그리고, 테스트를 해봅시다.



이미지 하나 골라서 업로드!


에디터내 이미지가 삽입되었습니다.




submit 을 클릭하니, 아래처럼, 첨부파일에 대한 정보가 표시되는군요.



글쓰기를 한 후, 글목록으로 가서 방금 작성한 글을 확인했습니다. 아래처럼 잘 나오는군요.

지금까지 다음에디터에서 이미지를 첨부하여 글 속에 삽입하는 기능을 살펴봤습니다.

전체적으로 어떻게 동작하는지 파악하는데, 의미를 두고자 했습니다. 


어디 써먹기에는 문제가 많습니다.


다음에디터에 파일 첨부도 살펴보고 구현을 해 보겠습니다.














Posted by 똑똑한 영장류


게시판 기능 구현해보면서, 글 입력받는 부분에 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 에서 해당코드를 그대로 가져다가 사용하면 잘 된다..였습니다. ㅎㅎ




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

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






























Posted by 똑똑한 영장류