FCKeditor에서 lightbox 연계하기
19 Sep 2006HTML 편집기로 FCKeditor는 훌륭한 도구이다. 여러 웹 브라우저(Web browser)를 지원하며, 쉽고 편하기 때문이다.
Lightbox는 그림 출력 도구로 연출이 예쁘다. 현재 화면에 작은 그림을 출력한 뒤 큰 그림 주소를 연결하여 작은 그림을 누르면 큰 그림이 뜨도록 할 때, Lightbox를 이용하면 별도의 새 창(window)를 띄우지 않고도 예쁘게 그림을 띄울 수 있어 곳곳에서 애용되고 있다.
이 두 가지를 함께 쓰고자 하는 경우, 그러니까 FCKeditor에 그림을 넣은 뒤 이 그림을 누르면 Lightbox로 화면을 연출하며 그림을 띄우려 하는 경우 조금 손이 간다.
<a href="hannal.jpg" rel="lightbox">여기 누르면 한날 사진이 대뜸 뜹니다</a>
위와 같이 rel 속성을 넣어야 lightbox가 이를 인식하여 화면 연출을 해주는데, FCKeditor에는 이를 지정해주는 곳이 없다.
이를 지정하게 해줄 방법은 여럿 있지만 나는 FCKeditor를 직접 손 봐서 직접 적용했다.
1. fck_image.html
fck_image.html를 찾아서 열어보면
<div id="divLink" style="display: none">
이런 부분이 있다. 그 아래에 보면
<div>
<span fcklang="DlgLnkTarget">Target</span><br />
이렇게 시작하는 부분이 있는데 그 div 구역 아래에 아래를 추가하자.
<div>
<span fcklang="DlgLnkRel">Rel</span><br />
<input id="txtLnkRel" style="width: 100%" type="text" />
</div>
저 위에 있는 Target div 영역 아래(</div> 아래)에 추가하면 된다.
2. fck_image.js
fck_image.js 파일을 찾아 열면
SetAttribute( oLink, '_fcksavedurl', sLnkUrl ) ;
SetAttribute( oLink, 'target', GetE('cmbLnkTarget').value ) ;
저 두 줄 뿐을 찾아가자. 혹시라도 찝찝하다면 Ok 함수(function Ok()) 안에서 찾자. 위 두 줄 아래에
SetAttribute( oLink, 'rel', GetE('txtLnkRel').value ) ;
이 줄을 추가하자.
3. 원리
FCKeditor에서 그림 관리 영역은 fck_image.html을 열어서 출력한다. Rel 관련 부분을 이 파일에 껴넣어 그림 관리에 Rel 값 입력란을 추가한 것이다.
위와 같이 Rel이라는 항목이 추가된다.
그런 뒤 OK 단추를 누를 때 이 입력란의 값을 가져와(GetE('txtLnkRel').value) rel이라는 속성을 만든다(SetAttribute). 그래서 <a href="그림주소" rel="써넣은내용" ...> 식으로 HTML tag를 만들어서 Lightbox가 이것을 찾아서 연출을 쓸 수 있도록 해준다.