웹마스터 팁

글의 출처  -  http://sejin7940.co.kr/?mid=tips_xe&document_srl=2434

역시나 개인사이트에 올린걸 가져온거여서 말이 짧습니다. 양해부탁드립니다 ^^

 

--------------------------------------------------------------------------------------------------------

 

이건 사진커뮤니티 등을 운영하는 분들께 꽤 유용한 팁이 될 듯하다. ^^

 

현재 XE에서 이미지를 복수개 올렸을 경우..  그 사이에 글 쓰기가 좀 어렵다.

하나 올리고, 바로 아래에 쓰고,  그다음 사진 올리고 쓰고.. 이런씩으로 하면 문제가 없으나...

한꺼번에 업로드한 사진을 다 올리면  사진 사이에 여백이 없음을 알 수 있다

여백이라 생각되는 지점에 마우스를 클릭하면,  가장 마지막 사진쪽으로 저절로 이동되어버려.. 사이에 글 쓰기가 참 어렵다고한다.

 

 

사실 숨어있는 간단한 사용 방법이 있긴하다.  이것만 사람들이 알면 소스 고칠 필요도 없다.

원하는 문구를 쓸 이미지를  마우스로 한번 클릭한뒤, 키보드의 우측방향 화살표를 한번 눌러주고  엔터키를 누르면

클릭했던 사진 바로 아래 여백이 생긴다. ^^v

 

( 정확히 말하면. 사진 사이를 클릭하면 안 되는게 당연하다..

   XE 업로드 원리상..  사실 사진들은 줄바꿈없이, 우측 space 1칸으로 사진들이 한줄로 쫙 연결되어있는 형태다

  단지 사진이 커서, 저절로 한줄 내려와보이는거 뿐인거지. 사람들의 착각인거지.

  따라서 정확하게 클릭을 하고프면, 기존 사진의 바로우측을 마우스로 잘 클릭하면 커서가 그 위치에 잡힘을 볼 수 있다  )

 

 

앞의 방법이 가장 이상적인 해결방법인데, 

관리자 혼자 올리는 사이트면 이걸로 바로 해결가능한데..   회원들이 같이 사용하면 이 방법 전파하기가 더 어렵다고 한다

 

 

결국..  직접 소스를 수정해보기로 한다.

 

xe/modules/editor/tpl/js/uploader.js 파일에서

참고로, XE Core에 포함되는 파일므로  해당 파일은 백업해두길 바란다. (개인적인 생각엔 업데이트될 가능성은 드물듯하지만)

 

 

temp_code += " />\r\n";   를 찾아서  아래문구로 대체 하면 된다.

 

temp_code += " /><br>&nbsp;<br>\r\n";  

 

이렇게 하고나면 사진 사이에 한줄이 자동으로 뛰워지기 한다.

그러나 중앙을 클릭해보면, 또 인식못하고.. 아래로 내려가버린다.

당연하다. 줄바꾸고 나면, 여백이 가장 왼쪽에 한칸 생기는거기에, 클릭을 좌측 끝에 맞춰 딱 해야 인식되는거다.

 

이 또한 사용자들이 불만을 토로할듯하여..  조금 더 수정해보았다.

아까 찾았던  temp_code += " />\r\n";   를 아래처럼 바꾸면 해결된다.

 

temp_code += " /><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>\r\n";


즉 강제로 대충 클릭할만한 공간만큼의 빈여백을 부여해둔 것이다.
&nbsp; 의 개수는 사이트 크기에 맞춰 줄이거나 늘려주면 된다.

이렇게 하면 여백에 클릭시 인식은 바로 된다. 

단지, 중앙정렬을 사용하려하거나 할때는 앞뒤 여백을 지워줘야해서 조금 귀찮아질 수도 있지만..  뭐.. 둘중 하나는 포기해야지

 


관리자만 사용하는거면, 굳이 소스 수정하지 말고..  앞에 언급한  클릭-우측한칸-엔터 방법을 이용하고

커뮤니티의 경우, 하단의 방법을 이용하는 것이 좋으리라 본다
만약, 커뮤니티여서 사용회원이 많아 설명하기가 어려울듯하면, 임의여백을 만들어두는 방식을 권한다

제목 글쓴이 날짜
IFRAME 삽입 [20] 박종익 2003.10.10
[레드의 태그초보]이미지삽입 태그 [2] 레드 2003.01.14
배경음악과 동영상 삽입 <embed> [7] 제이지라 2002.04.26
게시판에 구글 SyntaxHighlighter 3.0.83(구문강조) 적용하기 - 본문에 코드삽입시 유용 file 으아악. 2010.10.20
이미지 삽입시 아래에 한줄 띄우고 클릭가능하게 하여 편히 입력하게 만들자~ [8] file xemall 2010.10.13
왕초보용 xe 1.2.0 버전 사용 기본 레이아웃 좌측에 배너 삽입 방법. [7] 『june™』 2009.03.20
[수정 했습니다.]본문 입력없이 확장 변수로만 글작성 작성하기(그림삽입포함) [13] file 대암지기 2008.03.09
XE최신버전에 믹시(Mixsh) 위젯(widget) 삽입하는 방법 [2] 곰이v 2010.03.21
본문에 삽입된 그림의 확대기능이 작동하지 않는경우(XE Official Ver2 layout) [2] file 분홍곰 2009.08.14
이미지 여러개 삽입시 이미지 사이에 공백 및 글 쓸 수 있도록 [1] sejin7940 2010.07.07
레이아웃 삽입 후 최근 설문조사 가져오기 ilovesyr 2010.05.18
[초보] 본문 하단에 구글 애드센스 삽입방법 [2] BigSeong 2009.10.10
엄지 추천 기능 본문에 삽입 하고자 하실때 (급조) [2] file thejeon 2009.07.29
(0.1.2) 이모티콘 삽입 후 그림 안보일 때 [5] Simulz 2007.09.02
MSN로그인 상태를 홈피좌측 메뉴에 삽입하는 방법 [9] 팔공산 2007.11.27
제로보드XE 외부페이지에 javascrip 삽입하기 [3] BlueGATE 2008.01.22
댓글 입력창에 배경 이미지 삽입하는 방법 [4] 팔공산 2008.07.11
제로보드 XE나 개인 블로그에 GPS 로그(궤적)를 나타낸 구글맵 삽입하기 상오기 2009.03.21