FCKEditor 적용 팁

웹표준이 대두되면서 기존 혹은 신규 사이트에서 페이지나 게시물을 관리할 수 있는 HTML 에디터에 대한 관심도 자연스레 늘어나게 되었습니다. HTML 에디터에 대한 종류나 추천의 내용은 CDK의 관련글에서 참고하세요.

제가 다녔던 회사에서도 기존 자체 에디터를 가지고 있었지만 웹 표준에 맞는 코드생성부분이나 부가기능이 부족하여 나중에는 FCKEditor를 공식적으로 사용했습니다. 공개 에디터 툴을 훑어본 적은 있어도 샅샅히 들여다본 건 처음이었는데 퍼블리셔의 입장에서 FCKEditor란 녀석이 생각보다 막강한 기능들을 제공하고 있었습니다. 하지만 HTML 에디터로 생성하는 컨텐츠는 사이트 레이아웃 영역내 하나의 부분에 자리잡게 되는 경우가 대부분이기 때문에 이에 따라서 고려해야 할 부분도 생기게 되는데요. 별로 경험은 없지만 어쨌든 제가 FCKEditor를 사이트에 적용시키면서 문제됐던 부분이나 알게된 팁들을 정리해 봅니다.

템플릿 기능

FCKEditor를 살펴보면서 퍼블리셔의 피가 끓어오르는 가장 멋진 기능이었습니다. 구현방식도 간단하죠.

템플릿은 아래 이미지처럼 사용하고 싶은 템플릿 이미지를 선택하면 자동으로 해당 템플릿 구조의 HTML 소스를 에디터에 삽입시키는 기능입니다.

FCKEditor 캡쳐화면 - 템플릿 버튼FCKEditor 캡쳐화면 - 템플릿 선택화면

기본적으로 이 기능을 사용하기 위해서는 HTML, CSS, 약간의 XML을 다룰 수 있어야 합니다. 개인적으로 CSS를 이용한 템플릿화는 수십 수백장의 페이지를 가지고 있는 사이트를 구축하는 웹 에이젼시에서 페이지 제작방식의 꽃이라고 생각하는데, FCKEditor의 이 기능을 통해 CSS로 공통 관리가 가능한 컨텐츠 레이아웃을 입력할 수 있습니다.

Tip

템플릿 기능을 수정할 때 가장 중요한 파일은 FCKEditor 루트에 있는 fcktemplates.xml 입니다. 이 XML 파일에 템플릿에 대한 정보와 HTML 코드를 설정할 수 있습니다. xml 샘플을 예제로 설명드리겠습니다.

<Templates imagesBasePath="fck_template/images/">
	<Template title="오른쪽 이미지와 제목" image="template1.gif">
		<Description>하나의 이미지에 제목과 내용이 들어가 있는 형태의 입력 방식</Description>
		<Html>
			<![CDATA[
				<div class="editorTemplate1">
					<p class="img">이미지</p>
					<div class="con">
						텍스트
					</div>
				</div>
			]]>
		</Html>
	</Template>
</Templates>

속성값 부분정도만 유의깊게 보시면 금방 파악이 되실텐데 Templates의 imagesBasePath 속성은 템플릿 샘플 이미지의 기본경로이고, Template의 타이틀은 해당 템플릿의 이름, img는 템플릿 샘플 이미지의 주소입니다. 그리고 <![CDATA[ 에서부터 ]]> 부분 사이가 실제 입력되는 HTML 코드입니다.

다음으로 마크업에 대한 CSS 코드를 추가해야하는데요. 기본적으로 FCKEditor 입력영역은 root/editor/css/fck_editorarea.css 를 바라보고 있는데 어짜피 위지위그 모드에서도 템플릿이 CSS가 입혀져서 보여야 하고 실제 view 페이지에서도 보여야 하니까 저같은 경우는 editor 영역에 대한 CSS파일을 별개로 만들어서 import 시켜 사용했습니다. 뭐 방식은 각자의 성향에 따라~

Style 기능

템플릿 기능이 컨텐츠의 레이아웃을 잡아주는 기능이라 한다면 Style 기능은 개별 요소(Tag)에 대한 스타일의 템플릿화라고 볼 수 있습니다. 원리 자체는 템플릿 기능과 비슷하고 저 같은 경우에는 HX 태그의 스타일 지정, division의 스타일 지정 등에서 사용했습니다.

Tip

Style 기능을 수정하는 XML 파일은 FCKEditor 루트에 있는 fcktemplates.xml 입니다. 이 XML 파일에 템플릿에 대한 정보와 HTML 코드를 설정할 수 있습니다. 역시 xml 샘플을 예제로 설명드리겠습니다.

<Styles>
	<Style name="제목1" element="h1">
		<Attribute name="class" value="editorH1" />
	</Style>
</Styles>

마찬가지로 금방 파악이 되실텐데 Style 엘레멘트의 name 부분이 에디터에 표시될 해당 Style의 제목이고 element 부분이 삽입될 태그입니다. Attribute 엘레멘트를 사용하여 태그의 속성값을 줄 수 있는데 style attibute로 inline CSS 방식을 사용할 수도 있지만 CSS 사용의 목적상 class로 사용하는 것이 더 유용하겠죠? ^^

CSS import에 대한 설명은 템플릿 기능에서 설명했으므로 패스~

fckconfig.js 변경

FCKEditor에 대한 설정값들이 지정된 파일입니다. 위치는 루트에 있고요.

Tip

뭐 대부분 일반적인 설정부분이고, 중요한 부분이 있는데 FCKConfig.DocType 에 대한 정의 부분입니다. FCKEditor에서 컨텐츠를 입력할때 미리보기 기능이 있는데 이 기능이 팝업창으로 뜹니다. 이 팝업창의 Doctype를 설정해주는 부분으로 작업하고 계신 사이트와 동일한 DTD를 주시면 됩니다.

CSS 초기화에 대한 고민

제가 느낀바로는, HTML 에디터에 대한 사용여부와 종류가 HTML 작업초기에 이미 정해져있어야 합니다. CSS 초기화를 무작정 했을경우 위지윅모드에서 보여주던 화면과 출력 결과물이 다르게 보여질 수 있으므로 신중하게 사용하여야 합니다. CSS 초기화를 하시는 분도 있고 안하시는 분도 있을텐데 제 생각엔 사이트의 규모가 크다면 해주는 것이 좋은 것 같습니다. 물론 위에서 언급한 ‘무작정’이 되면 안되겠고, 초기화 해보신 분들은 다 각자의 노하우를 가지고 계실 것입니다.

Tip

아무튼 FCKEditor를 사용할 때 사이트 CSS 초기화 부분에서 고려해야 할 태그 및 속성은 다음과 같습니다

  • form
  • input type=”checkbox”
  • input type=”text”
  • input type=”button”
  • input type=”submit”
  • input type=”reset”
  • input type=”image”
  • input type=”hidden”
  • textarea
  • select
  • strong
  • em
  • u
  • strike
  • sub
  • sup
  • ol
  • ul
  • blockquote
  • div
  • p
  • a
  • img
  • embed
  • pre
  • hX
  • address
  • table
  • caption

이것들이 FCKEditor에서 생성할 수 있는 태그들인데요. 이부분들 중에는 초기화를 시키고 다시 브라우저가 기본적으로 렌더링하는 형태와 비슷하게 복구할 수 있는 부분도 있고 그렇지 못한 경우도 있습니다. 초기화 된 엘레멘트의 스타일 복구는 HTML 4를 위한 스타일쉬트 견본을 참고하시면 됩니다. 위 사항들을 참고해서 좀더 최적화된 CSS 초기화가 가능할 것으로 보입니다.

Flash wmode

플래시 오브젝트에 대한 wmode는 세가지가 있습니다. ‘window’, ‘transparent’, ‘opaque’ 로 wmode를 지정하지 않았을 때의 기본값은 ‘window’ 입니다. 그런데 아무래도 에디터 영역이 사이트의 레이아웃의 한 영역에 자리잡고 있다면 다른 position이 absolute 된 영역과 겹칠 가능성이 있는데요. 이렇게 되면 wmode 값이 ‘window’ 이므로 absolute된 position의 z-index가 제대로 작동하지 않고 플래시가 무조건 상위에 위치하게 됩니다.

Tip

이를 해결하기 위해서 FCKEditor 본문영역의 flash에 대한 wmode 기본값을 변경해주어야 할텐데요. ‘transparent’ 와 ‘opaque’ 어느 값을 줘도 상관없지만 ‘transparent’가 점유율을 더 높인다고 하더군요. 투명플래시를 입력해야 하는 경우가 있는지 여부에 따라서 선택사항이 될것 같습니다.

FCKEditor에서 플래시에 대하여 제어하는 파일은 fckeditor root/editor/dialog/fck_flash/fck_flash.js 입니다.

해당 소스를 보시면 UpdateEmbed( e ) 라는 function이 있는데 그 부분에 object의 속성값을 정의하는 구문들이 있습니다.

SetAttribute( e, 'wmode', 'opaque' ) ;

적당한 곳에 위와같이 wmode를 정의해 주시면 됩니다 :)

지금까지 FCKEditor 사용간 퍼블리셔분들이 알아야 할 팁들을 몇가지 정리해 보았는데요. 사실 전 FCKEditor를 적용한 프로젝트가 딱 한번 있었습니다 ㅋㅋㅋ 이것 외에도 고려할 부분이 상당히 많겠죠. 백 앤드 영역까지 포함해서 보았을때의 HTML 에디터 사용률로 생각해본다면, 이런 부분에 대한 노하우나 팁 공유도 중요한 부분이 될 것 같습니다.