본문 바로가기

다음에디터3

22. 다음에디터 정리 짜잘한 팁들만 끄적끄적 올리는, 별 볼일 없는 이 블로그를 찾는 많은 사람들은 '다음에디터' 를 찾아오는 걸로 보입니다. 강좌처럼 적긴 했지만, 저만 이해할 수 있는, 상세하지 못한 글이어서 오히려 혼란을 주지않았나 걱정도 살짝 됩니다. 이번에 잠깐 다시 웹 사이트 하나 만들 일이 있어서 다음에디터 사용하게 되었는데, 그 덕에 다시 한번 정리를 해보려고 합니다. (글 쓰는 동안 말투는 왔다갔다 할 수 있으니 양해바랍니다.) 1. 다음 에디터 다음에디터는 웹 페이지 상에서 글을 작성할 때, 단순 텍스트 문서 작성 이상을 할 수 있도록 해주는 위지윅 에디터이다. 폰트도 바꾸고, 크기도 바꾸고, 정렬도 할 수 있고, 표도 그려넣을 수 있고, 이미지 삽입도 가능하게 해 준다. textarea 가 메모장이라면, .. 2013. 9. 25.
21. 위지윅 에디터 붙이기 - 다음에디터 두번째 이전 글에서 다음에디터를 붙여서 게시판 글쓰기 부분을 수정해봤습니다.그 부분에서 빠져 있는 사진 삽입과 파일 첨부를 살펴보겠습니다. 로그인을 하고 bbs/list.php에 접근해서 글 쓰기 버튼을 클릭합시다.아! list.php 에 글쓰기 버튼을 달아놓지 않았군요. 쉽게 찾아볼 수 있는 파일 업로드 관련 코드입니다.www/files 라는 곳에 업로드를 합니다. 테스트해서 잘 되는지 일단 확인하세요. 그럼, 이렇게 서버쪽으로 넘어온 이미지를 다음에디터에 정보를 넘겨줘서 편집하고 있는 화면에 삽입을 할 수 있어야겠네요. trex/image.html 에 정보는 다 있습니다. 위 코드 아래에 에디터와 교신을 할 부분을 작성합시다. trex/image.html 에 있던 initUploader()와 done()을 .. 2012. 12. 19.
20. 위지윅 에디터 붙이기 - 다음에디터 게시판 기능 구현해보면서, 글 입력받는 부분에 textarea 를 이용했었습니다.그래서 텍스트만 입력가능하죠. 효과도 줄 수 없구요. 그 부분을 보다 풍성한 효과로 글 작성이 가능하도록 위지윅 에디터를 장착해 보겠습니다. 다음 에디터 Daum Editor 무료로 사용할 수 있는 위지윅 에디터가 몇개 있습니다만, 다음에서 오픈소스로 풀어놓은 '다음에디터'를 이용할 계획입니다. 구글코드에서 오픈으로 작업하다가 github 으로 이사를 했네요.주소는 아래와 같습니다. https://github.com/daumeditor/DaumEditor 또 이사를 했네요.https://github.com/daumcorp/DaumEditor 우선 소스 다운로드를 받읍시다. 다운 받은 파일을 압축해제하면 아래와 같은 디렉토리 .. 2012. 12. 18.