다음 에디터 적용 게시판 정보
게시판 다음 에디터 적용 게시판관련링크
첨부파일
본문
다음 에디터를 그누보드에 붙여봤습니다.
개인적으로 쓸 용도이므로 소스는 좀 엉망입니다만 참고로 쓰세요.
루트에 그누보드가 설치되어 있고요.
루트에 다음 에디터가 설치되어 있는 환경이 기본입니다.
다음에디터의 기본 디렉토리는 daumeditor 입니다.
1. 다음에디터 설치
https://github.com/daumeditor/DaumEditor 에 가셔서 다음에디터를 받습니다.
daumeditor 디렉토리만 원하는 곳에 올리면 됩니다. 나머지는 없어도 되는군요.
2. 경로 수정
write.skin.php 파일에서 본인이 설치한 다음 에디터의 경로와 홈페이지 경로를 수정해야 합니다.
txHost이 문자열을 찾아서 본인의 홈페이지 경로로 수정하세요.
/daumeditor/이거 찾아서 본인이 다음에디터를 설치한 경로로 수정하면 되겠습니다.
2. 툴바 수정
write.skin.php 파일이 다음에디터에서 제공하는 기본 2열 툴바를 사용한 파일입니다.
write.skin2.php 는 1열 툴바로 수정한 것이고요.
파일 첨부는 그누보드를 기본으로 하여 쓰거나 다른 업로더를 붙이시면 될것 같네요.
1열 툴바의 경우 일부 버튼은 css를 수정하여 간격을 맞추셔야 합니다.
html, 외부컨텐츠 버튼등을 2열에서 1열로 바꾸면서 간격이 틀어집니다.
* 제가 사용한 1열 툴바의 경우 수정해야할 css예시입니다.(write.skin2.php사용 기준)
-daumeditor/css/trex/editor/__container.css 의 102줄에 추가
.tx-switchtoggle, .tx-switchtoggle-hovered, .tx-switchtoggle-pushed{
margin-top:-4px;
}
-daumeditor/css/trex/editor/__attacher.css 의 26줄에 추가
.tx-media {margin:-3px 20px 0 0;}
-daumeditor/css/trex/editor/fullscreen.css
.tx-fullscreen 의 margin-top을 -5로 수정
끝
*에디터에 DEVELOPMENT MODE글씨가 나타나는 것은 daumeditor/js/develpoment_environments.js의 58번째 줄을 주석 처리하면 될것 같네요.
//indicator.innerHTML = "DEVELOPMENT MODE";
4. 기타
다음에디터에서는 기본적으로 엔터하면 p, 쉬프트 엔터하면 br태그가 생성됩니다.
글을 다 쓰고 본문을 보면 p로 인해 공간이 많이 떨어져 있는 것을 볼 수 있습니다.
이때는 #writeContents p {margin:0;} 이것을 그누보드 css에 넣어주시면 될듯 합니다.
<span id=writeContents>이것이 본문을 감싸고 있더군요.
그외, write.skin.php 원형이 파손된 부분이 많고, 오류가 있을 수 있으므로 사용에 신중을 기해주세요.
개인적으로 쓸 용도이므로 소스는 좀 엉망입니다만 참고로 쓰세요.
루트에 그누보드가 설치되어 있고요.
루트에 다음 에디터가 설치되어 있는 환경이 기본입니다.
다음에디터의 기본 디렉토리는 daumeditor 입니다.
1. 다음에디터 설치
https://github.com/daumeditor/DaumEditor 에 가셔서 다음에디터를 받습니다.
daumeditor 디렉토리만 원하는 곳에 올리면 됩니다. 나머지는 없어도 되는군요.
2. 경로 수정
write.skin.php 파일에서 본인이 설치한 다음 에디터의 경로와 홈페이지 경로를 수정해야 합니다.
txHost이 문자열을 찾아서 본인의 홈페이지 경로로 수정하세요.
/daumeditor/이거 찾아서 본인이 다음에디터를 설치한 경로로 수정하면 되겠습니다.
2. 툴바 수정
write.skin.php 파일이 다음에디터에서 제공하는 기본 2열 툴바를 사용한 파일입니다.
write.skin2.php 는 1열 툴바로 수정한 것이고요.
파일 첨부는 그누보드를 기본으로 하여 쓰거나 다른 업로더를 붙이시면 될것 같네요.
1열 툴바의 경우 일부 버튼은 css를 수정하여 간격을 맞추셔야 합니다.
html, 외부컨텐츠 버튼등을 2열에서 1열로 바꾸면서 간격이 틀어집니다.
* 제가 사용한 1열 툴바의 경우 수정해야할 css예시입니다.(write.skin2.php사용 기준)
-daumeditor/css/trex/editor/__container.css 의 102줄에 추가
.tx-switchtoggle, .tx-switchtoggle-hovered, .tx-switchtoggle-pushed{
margin-top:-4px;
}
-daumeditor/css/trex/editor/__attacher.css 의 26줄에 추가
.tx-media {margin:-3px 20px 0 0;}
-daumeditor/css/trex/editor/fullscreen.css
.tx-fullscreen 의 margin-top을 -5로 수정
끝
*에디터에 DEVELOPMENT MODE글씨가 나타나는 것은 daumeditor/js/develpoment_environments.js의 58번째 줄을 주석 처리하면 될것 같네요.
//indicator.innerHTML = "DEVELOPMENT MODE";
4. 기타
다음에디터에서는 기본적으로 엔터하면 p, 쉬프트 엔터하면 br태그가 생성됩니다.
글을 다 쓰고 본문을 보면 p로 인해 공간이 많이 떨어져 있는 것을 볼 수 있습니다.
이때는 #writeContents p {margin:0;} 이것을 그누보드 css에 넣어주시면 될듯 합니다.
<span id=writeContents>이것이 본문을 감싸고 있더군요.
그외, write.skin.php 원형이 파손된 부분이 많고, 오류가 있을 수 있으므로 사용에 신중을 기해주세요.
추천
12
12
댓글 전체
멋진 스킨 감사 합니다.
감사합니다^^
감사합니다
오옷,.., 이거슨!
이미지 첨부등은 사용방법이 없나요?
너무너무 좋습니다!
이미지 첨부등은 따로 구현해야 합니다.
저는 이미 쓰고 잇는 업로더가 더 좋아서 그냥 쓰고 있네요.
저는 이미 쓰고 잇는 업로더가 더 좋아서 그냥 쓰고 있네요.
감사합니다
유용하네요^^
이미지첨부나 파일첨부가 어케 방법없나요? ^^
참신하네요. 이미지 자체 업로드 없애 버리고 싶어는데^^
감사합니다. 잘 적용되네요.
http://carisma.co.kr/v4/bbs/write.php?bo_table=free
비회원이 글 작성 하는 곳에 쓸 때는
에디터로 이미지 올리지 못하게 하는 것이 더 좋은거 같아요.^^
저같은 경우에 비회원이 글 작성할 경우 본문에 태그가 그대로 노출 되는 문제가 있었는데..
<form> 에 <input type="hidden" name="html" value="html1"> 한줄 추가시켜준 후 해결 했습니다.
http://carisma.co.kr/v4/bbs/write.php?bo_table=free
비회원이 글 작성 하는 곳에 쓸 때는
에디터로 이미지 올리지 못하게 하는 것이 더 좋은거 같아요.^^
저같은 경우에 비회원이 글 작성할 경우 본문에 태그가 그대로 노출 되는 문제가 있었는데..
<form> 에 <input type="hidden" name="html" value="html1"> 한줄 추가시켜준 후 해결 했습니다.
멋지심
감사합니다^^
수고하셨습니다. 좋은자료 감사합니다.
감사합니다!!