이미지 여러개 삽입시 이미지 사이에 공백 및 글 쓸 수 있도록

글의 출처  -  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; 의 개수는 사이트 크기에 맞춰 줄이거나 늘려주면 된다.

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

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

 

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

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

출처: http://www.xpressengine.com/index.php?mid=tip&search_keyword=%EC%9D%B4%EB%AF%B8%EC%A7%80&search_target=title&page=3&document_srl=18997155