FCKeditor에서 lightbox 연동하기

FCKeditor에서 lightbox 2를 연동해보자

FCKeditor를 이용하여 이미지 업로드를 하다보면 이미지에 자동으로 링크가 걸리지 않으므로 사용자한테 더욱 친근한 인터페이스를 제공해 주지 못하는 허점이 있다.
웹용 이미지 뷰어(?) 에서 그나마 가장 잘 만들어진 솔루션이 있다면 lightbox 를 손꼽아야 할 것이다.

lightbox 2는 사실 lightbox에 기반하여 개발이 되여진 솔루션이며, 현재 버젼 2.0.3까지 나와있는 상태이다. FCKeditor에서 lightbox를 사용하려면 여간 번거롭지 않다. <a> 태그에 rel속성을 세팅해주어야 하는데 이것을 FCKeditor과 lightbox를 연동함으로써 자동으로 설정해줄수가 있다.

자~ 그럼 아래에 FCKeditor와 lightbox2를 어떤방식으로 연동할건지 그 원리부터 설명하겠다.

FCKeditor에서 실제 이미지 업로드를 담당하는 페이지는 fck_image.html인데 이 파일을 열어보면 다음과 같은 부분들을 볼수 있다.

<div id="divLink" style="display: none">

그렇다, 이 div태그속에 포함된 내용은 아래에 첨부한 이미지에서 볼수 있는 이미지 링크 레이어부분이다.

FCKeditor에서는 기본 URL과 Targer속성을 세팅가능하도록 지원하고 있다. 하지만 우리가 여기서 rel이라는 새로운 속성을 추가해주어야 lightbox에서 그것을 인지하여 처리를 해준다. 하지만 여기서 rel속성을 노출 시켜서는 않된다. 왜냐면 rel속성은 특정되게 lightbox를 사용하기 위해서만 사용이 되여지기 때문에 rel를 hidden으로 등록시켜줌이 좋다.

소스를 아래에서처럼 수정하면 된다. 수정된 부분은 붉은색으로 표시했다.

소스열기

 <div id="divLink" style="display: none">
  <table cellspacing="1" cellpadding="1" border="0" width="100%">
   <tr>
    <td>
     <div>
      <span fcklang="DlgLnkURL">URL</span><br />
      <input id="txtLnkUrl" style="width: 100%" type="text" onblur="UpdatePreview();" />
     </div>
     <div id="divLnkBrowseServer" align="right">
      <input type="button" value="Browse Server" fcklang="DlgBtnBrowseServer" onclick="LnkBrowseServer();" />
     </div>
     <div>
      <span fcklang="DlgLnkTarget">Target</span><br />
      <select id="cmbLnkTarget">
       <option value="" fcklang="DlgGenNotSet" selected="selected">&lt;not set&gt;</option>
       <option value="_blank" fcklang="DlgLnkTargetBlank">New Window (_blank)</option>
       <option value="_top" fcklang="DlgLnkTargetTop">Topmost Window (_top)</option>
       <option value="_self" fcklang="DlgLnkTargetSelf">Same Window (_self)</option>
       <option value="_parent" fcklang="DlgLnkTargetParent">Parent Window (_parent)</option>
      </select>
     </div>
     <input id="txtLnkRel" type="hidden"/>
    </td>
   </tr>
  </table>
 </div>

그리고 fck_image.js 파일을 연다.
OnUploadCompleted 메소드를 찾아서 마지막 쯤 보면

SetUrl( fileUrl ) ;
GetE('frmUpload').reset() ;

이런 부분이 있다. 이건 실제 파일 업로드가 완성되면 URL을 기본 파일이 업로드된 실제 path로 세팅해주는 부분인데 이 부분에 우리는 <a> 태그에 대하여 여러가지 값들을 세팅해주겠다.

위 소스 밑에 아래 소스를 추가시켜준다.
 

GetE('txtLnkUrl').value = fileUrl ;
GetE('txtLnkRel').value = "lightbox" ;
GetE('txtBorder').value = "0";

간단한 설명을 첨부하자면
우리가 만들어야 할 태그의 형태는 아래와 같은 형태가 될것이다.

<a href = "이미지실제 주소" rel="lightbox"><img src=""이미지 실제 주소" border="0"/></a>

위 스크립트는 바로 윗 형태의 태그를 만들어 주는 역할을 한다고 볼수 있다.

2007/02/28 - [자바 어플리케이션/기타 프레임웍들] - FCKeditor 2.4 설정 입문
2007/02/26 - [자바 어플리케이션/기타 프레임웍들] - FCKeditor 와 Java 연동하기