다음 위지윅 에디터를 이용하여 글 수정하기 기능 구현

이미 작성된 글을 수정하기 위해서는 글의 제목과 내용을 불러와서 화면에 출력을 해주어야 한다. 그냥 input태그를 이용하면 간단하지만 세련되게 위지윅 에디터를 써보려고 한다.

먼저 에디터 부분을 모두 가져온다.

<!-- 에디터 시작 --> 부터 <!-- 에디터 끝 --> 까지 약 430줄정도 되는 부분을 가져오면 된다. 정확히 말하면 <form>태그 부분을 감싸고 있는 <div> 전부를 가져오는 것이다. 그다음 저장과 불러오기를 해야 하므로 아래 스크립트 모두 가져온다.

그다음 load부분에서 해줄것이 있다. 

<textarea id="sample_contents_source" style="display:none;">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <p style="text-align: center;">
  <img src="https://t1.daumcdn.net/cfile/blog/2064CD374EE1ACCB0F" class="tx-daum-image" style="clear: none; float: none;"/>
 </p>
 <p>
  <a href="https://t1.daumcdn.net/cfile/blog/207C8C1B4AA4F5DC01"><img src="snapshot/images/icon/p_gif_s.gif"/> editor_bi.gif</a>
 </p>
</textarea>
<script type="text/javascript">
 function loadContent() {
  var attachments = {};
  attachments['image'] = [];
  attachments['image'].push({
   'attacher': 'image',
   'data': {
    'imageurl': 'https://t1.daumcdn.net/cfile/blog/2064CD374EE1ACCB0F',
    'filename': 'github.gif',
    'filesize': 59501,
    'originalurl': 'https://t1.daumcdn.net/cfile/blog/2064CD374EE1ACCB0F',
    'thumburl': 'https://t1.daumcdn.net/cfile/blog/2064CD374EE1ACCB0F'
   }
  });
  attachments['file'] = [];
  attachments['file'].push({
   'attacher': 'file',
   'data': {
    'attachurl': 'https://t1.daumcdn.net/cfile/blog/207C8C1B4AA4F5DC01',
    'filemime': 'image/gif',
    'filename': 'editor_bi.gif',
    'filesize': 640
   }
  });
  /* 저장된 컨텐츠를 불러오기 위한 함수 호출 */
  Editor.modify({
   "attachments": function () { /* 저장된 첨부가 있을 경우 배열로 넘김, 위의 부분을 수정하고 아래 부분은 수정없이 사용 */
    var allattachments = [];
    for (var i in attachments) {
     allattachments = allattachments.concat(attachments[i]);
    }
    return allattachments;
   }(),
   "content": document.getElementById("sample_contents_source") /* 내용 문자열, 주어진 필드(textarea) 엘리먼트 */
  });
 }
</script>
 
<div><button onclick='loadContent()'>SAMPLE - load contents to editor</button></div>

이 부분에서 붉은 글씨 부분은 지운다. 다음 textarea부분에 실제 컨텐츠를 출력시킨다.

<textarea id="sample_contents_source" style="display:none;">
        <!-- 이곳에 DB에서 가져온 컨텐츠를 출력시킨다. -->
 <?php echo $row['content'];?>
</textarea>
<script type="text/javascript">
 function loadContent() {
  var attachments = {};
                Editor.modify({
   "attachments": function () { /* 저장된 첨부가 있을 경우 배열로 넘김, 위의 부분을 수정하고 아래 부분은 수정없이 사용 */
    var allattachments = [];
    for (var i in attachments) {
     allattachments = allattachments.concat(attachments[i]);
    }
    return allattachments;
   }(),
   "content": document.getElementById("sample_contents_source") /* 내용 문자열, 주어진 필드(textarea) 엘리먼트 */
  });
 }
</script>

이제 처음 페이지가 로드되었을때 로드 함수를 실행 시켜 주면 된다. 바로 위의 코드 아래에 아래의 코드를 삽입해준다.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() { 
    loadContent();
});
</script>

이제 수정 페이지로 들어가면 에디터에 컨텐츠가 출력되어 있을것이다.

결과물을 보고싶다면, http://kost0806.dothome.co.kr/board/bbs/list.php 에서 보면 된다.