XpressEngine과 관련된 팁이나 강좌를 소개하는 게시판입니다.
자신이 생각하기에는 아주 사소한 내용이라도 누군가에게는 큰 도움이 될 수 있습니다.
XE 원 소스 코드를 수정하는 팁은 당장은 도움이 될지 몰라도 결국 XE 업그레이드를 하지 못하게 되니 팁을 올리시는 분이나 팁을 적용하시는 분이나 모두 주의 부탁드립니다.

댓글(코멘트) 입력창에 이미지 넣기

조회 수 4975 추천 수 1 2008.08.29 03:25:23

안녕하세요...이곳에 처음으로 글을 작성합니다.

제가 하려고 했던 기능은....
댓글 부분에 글을 미리 넣어두고 onFocus 이벤트를 줘서 클릭하면 문장이 사라지게 하려고 했습니다.

그런데 댓글 부분이 textarea 가 아니고 iframe 으로 되어있어서...이벤트를 줄수가 없더라구요...
질문게시판을 통해서 여러번 질문드렸는데 답변 주는 분이 없어서 어쩔수 없이... 배경으로 처리했습니다.
(결정적인 단서를 제공해주신 id: ⅴⅴⅴⅴⅴ  님께 감사드립니다!)

적용된 예시를 미리 보여드리자면... 아래 그림과 같은 식으로 작동합니다.

comm.jpg


배경이기때문에 글을 써도 저 부분은 남아있구요...
에디터 배경으로 넣었기때문에 글쓰기를 하면 배경으로 깔려있습니다.
단, 글쓰기를 완료하면 보이지 않습니다.

적용 방법은 아래와 같습니다. (zbxe는 제로보드가 설치된 폴더를 뜻합니다.)

/zbxe/modules/editor/skins/default/editor.html 의 중간 136줄(에디트플러스 기준)을 보면 아래와 같은 코드가 있습니다.
  <!-- 에디터 출력 -->
    <div class="editor_iframe_box"><iframe id="editor_iframe_{$editor_sequence}" frameborder="0" height="{$editor_height}" style="background-color:transparent;" allowTransparency="true"></iframe></div>
    <textarea id="editor_textarea_{$editor_sequence}" class="editor_iframe_textarea" style="display:none; height:{$editor_height}"  rows="10" cols="10"></textarea>

빨간색 부분을 이미지 경로에 맞게 변경해줍니다.

야래 예시의 경우
/zbxe/modules/editor/skins/default/images 경로에 ABC.gif 이미지를 저장했을 경우입니다.

    <!-- 에디터 출력 -->
    <div class="editor_iframe_box"><iframe id="editor_iframe_{$editor_sequence}" frameborder="0" height="{$editor_height}" style="background:transparent url(./modules/editor/skins/default/images/ABC.gif) no-repeat right top;" allowTransparency="true"></iframe></div>
    <textarea id="editor_textarea_{$editor_sequence}" class="editor_iframe_textarea" style="display:none; height:{$editor_height}"  rows="10" cols="10"></textarea>

끝입니다...간단하죠?? ^^;;;

다시 한번 말씀드리지만
에디터 배경으로 넣었기때문에 글쓰기(게시물)를 하면 배경으로 깔려있습니다.
적용하실 분들은 이점을 꼭 미리 알고 게셔야 나중에 당황하는 일이 발생하지 않습니다..-_-

그리고 혹시...댓글을 쓰기 위해서  댓글창에 마우스를 갖다대면... 배경 사라지게 할줄 아는 분 계시면...
팁 공개를 정중히 요청드립니다...(__ )

이상 허접 팁이었습니다~

적용페이지 미리보기 <-- 직접 보실 분들은 링크를 클릭하세요~ (제 홈페이지가 좀 느리니...이해해주시길..)

댓글 '19'

profile

[레벨:6]김경훈229

2008.08.29 12:51:30
*.6.132.83

감사합니다.

아주 좋네요.. 퇴근하면 함 적용해봐야겠습니다...^^

[레벨:5]ⅴⅴⅴⅴⅴ

2008.08.29 16:58:28
*.104.224.216

아.. 제가 확인도 안하고 txtarea라고 해서 죄송합니다^^;;

이제 잘하시네요 ㅎㅎ

보답으로 마우스오버시 배경이 제거되는 소스를 알려드릴게요.

    <!-- 에디터 출력 -->
    <div class="editor_iframe_box"><iframe id="editor_iframe_{$editor_sequence}" frameborder="0" height="{$editor_height}" style="background:transparent url(./modules/editor/skins/default/images/ABC.gif) no-repeat right top;" allowTransparency="true" onmouseover="this.style.background=''; "></iframe></div>
    <textarea id="editor_textarea_{$editor_sequence}" class="editor_iframe_textarea" style="display:none; height:{$editor_height}"  rows="10" cols="10"></textarea>


profile

[레벨:8]skyatc

2008.08.29 17:42:25
*.158.113.21

onMouseover 이벤트는 되는군요? 전 iframe에서는 모든 이벤트가 안먹는줄 알았어요~
완전 ㄳ합니다!!!
profile

[레벨:12]ZB4User

2008.08.29 17:56:03
*.74.146.81

오, 숨겨진 팁.. 감사합니다 %^%
profile

[레벨:6]김경훈229

2008.08.29 20:35:05
*.133.34.8

배경이미지가 이쁜데 올려주시면 안 될까요?

원본으로요....^^

미리 감사드립니다...emoticon
profile

[레벨:8]skyatc

2008.08.30 23:22:18
*.158.113.38

웹서핑중 구한거라 이런 공개적인 곳에 공유해도 되는지 몰라서....이메일로 발송했는데...
이메일이 돌아왔네요...-_-
profile

[레벨:6]김경훈229

2008.08.30 23:35:32
*.133.34.8

에거....
메일주소의 co.kr 이 com으로 바뀌었는데 깜빡 잊고 수정을 안 했었군요...^^

번거로우시겠지만 이 글 보시면 메일로 다시 한번 보내주시면 고맙겠습니다.
회원정보를 수정해 두었습니다.
감사합니다...
profile

[레벨:8]skyatc

2008.08.30 23:56:14
*.158.113.38

넵~ 보냈습니다~
profile

[레벨:8]skyatc

2008.08.30 23:57:35
*.158.113.38

또 돌아왔는데요....이번엔 바로 돌아오네요..-_-

주소가 어떻게 되세요...?
skyatc@ 핫멜 닷컴 으로 메일 한통만 주세요~
profile

[레벨:8]Gnee

2008.08.29 21:59:24
*.40.240.8

오늘 구현하려고 했던기능인데 타이밍 좋게 올라와있어서 놀랐네요;
정말 감사드립니다.^^
profile

[레벨:3]CL님

2008.08.30 17:24:54
*.4.233.235

좋은 팁 감사합니다~
그런데 염치없이 하나 더 요구하자면.. 미리보기 페이지 가보니까, 마우스를 갖다대면 그림이 사라지는데 마우스를 떼도 다시 안나타나네요.. 다시 나타나게 할 수는 없을까요 ^_T
profile

[레벨:8]skyatc

2008.08.30 23:52:44
*.158.113.38

추천
1
비추천
0
마우스 아웃을 주면 될것 같아서 해봤는데 되네요...

미리보기

    <!-- 에디터 출력 -->
    <div class="editor_iframe_box"><iframe id="editor_iframe_{$editor_sequence}" frameborder="0" height="{$editor_height}" style="background:transparent url(./modules/editor/skins/default/images/ABC.gif) no-repeat right top;" allowTransparency="true" onmouseover="this.style.background=''; " onmouseout="this.style.background='transparent url(./modules/editor/skins/default/images/ABC.gif) no-repeat right top;'; "></iframe></div>
    <textarea id="editor_textarea_{$editor_sequence}" class="editor_iframe_textarea" style="display:none; height:{$editor_height}"  rows="10" cols="10"></textarea>
profile

[레벨:8]때린데 또때려

2008.09.05 06:02:38
*.244.185.127

좋은 팁이네요.. 적용해 보겠습니다.
profile

[레벨:14]공듀

2008.09.17 02:34:06
*.128.137.85

윗분께서 이용하신 코멘트 이미지 입니다.

commentBg.gif
저장은 다른이름으로 저장하시면 끝!

첨부
profile

[레벨:4]시애틀엘비스

2008.09.20 12:52:35
*.92.148.77

문제는 모든 게시물을 작성할때도 이미지가 보인다는게 문제네여..-.-;;;

댓글만 나오게 하면 좋을것 같은데....

권지훈

2008.10.02 20:41:28
*.237.146.207

이거 그누보드에 적용시켜보구 싶은데..아시는분 제발 연락좀 주세요~!~!~!~!~!
부탁드립니다..ㅠ_ㅠ
www.theyeon.com 에 있는 하단 코멘트에 적용하고 싶어요..ㅠ_ㅠ
아무리 해도 안되네요..ㅠ_ㅠ

태양맘

2008.10.22 02:28:20
*.220.233.237

감사합니다..이뻐요~
profile

[레벨:8]때린데 또때려

2010.02.13 22:02:46
*.56.96.124

현재 최신배포된 버전에서는 위 팁을 사용가능한가요

소스가 많이 바뀌었는데...ㅠ.ㅠ

최신버전에서도 사용할 수 있게 해주세요

전현민

2010.04.02 16:46:23
*.222.15.10

감사합니다.

문서 첨부 제한 : 0Byte/ 10.00MB
파일 제한 크기 : 2.00MB (허용 확장자 : *.*)
List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 구 동영상 매뉴얼 이동 [2] [레벨:30]zero 2009-09-14 53270
525 호스팅 하시는 분들 서버사용량 줄이세요.. image [8] [레벨:3]☆쫑 2008-09-19 4094
524 아이프레임 [레벨:1]나나나나난 2008-09-18 3420
523 주소록 구현 (외부 페이지) [17] [레벨:1]CSLab 2008-09-15 5655
522 게시판 에디터 폰트 글자(글씨)크기 변경하는 법 [레벨:2]씨에씨에 2008-09-12 4285
521 사진 한꺼번에 일괄적으로 올리기 image [4] [레벨:1]안정수650 2008-09-12 4774
520 에디터 9pt 추가 및 에디터에도 웹폰트 보이게 하기. imagefile [13] [레벨:2]욜리 2008-09-11 5807
519 IP 주소 4자리수 모두 공개하는 방법 [1] [레벨:4]블루파티 2008-09-11 3900
518 블로그, 홈페이지 가입시 자동 입력되는 http:// 없애기 [2] [레벨:1]류영무 2008-09-09 3720
517 등록하시겠습니까? 등록할까요? 안 나오고 바로 글 등록되게 하는 법 [6] [레벨:2]황건순 2008-09-08 4130
516 다음카페에 끊김없이 음악나오게 하기 [레벨:3]푸른커튼 2008-09-06 3888
515 동일서버내 페이지에서 로그인정보 활용하기... [3] [레벨:2]수로 2008-09-06 5197
514 회원 포인트 선물 하기 등 포인트 변경시 바로 적용 방법 [레벨:11]한꼬마 2008-09-06 3963
513 카멜레온 최근글 위젯 클릭시 새창 팁 [레벨:1]가랑바람 2008-09-04 3337
512 [우클릭 및 드레그 방지법] 및 [방지된 홈페이지 해재법] >0< [7] [레벨:2]이홍석295 2008-09-03 4030
511 각 리스트형 위젯에 페이지 기능을 달자. [10] [레벨:15]라르게덴 2008-09-02 4452
510 원하는 위치에 구글 (맞춤)검색창 달기 [2] [레벨:9]다케루 2008-09-02 4537
509 문서 카테고리를 메뉴에 적용하기 위한 레이아웃 수정 팁과 개념토론 image [7] [레벨:1]제베 2008-08-31 5492
508 메인화면에 플래시 쉽게 삽입하는 방법.. [9] [레벨:2]청개구리00 2008-08-30 6282
507 밑에 페이지 네비게이션 수정 (다음10개, 이전10개등으로) imagefile [6] [레벨:3]Clanss 2008-08-29 3864
» 댓글(코멘트) 입력창에 이미지 넣기 imagefile [19] [레벨:8]skyatc 2008-08-29 4975



XE Login

OpenID Login