제로보드XE 에디터 글 상자 컴포넌트

글 쓰면서 리눅스 콘솔 화면이나 코드, 혹은 설정 파일 등을 적을 때, 직접 HTML 코드를 수정하거나 인용구 컴포넌트를 써서 사용했으나 왠지 모를 불편함이 나를 자꾸 자극하였다. 이 귀찮음 어떻게 할 수 없을까?

결국 내 입맛에 맞는 에디터 컴포넌트를 만들기로 하고, 제로보드XE 에디터에 기본적으로 설치된 인용구 컴포넌트를 기반으로 작업한 결과물이 글 상자 컴포넌트이다.

글 상자 컴포넌트를 만들면서 고려한 점은

1. 화면 글꼴을 설정할 수 있어야 한다.
2. 줄 간격을 지정할 수 있어야 한다.
3. 긴 줄이 들어간 소스 같은 경우 한 줄에 나타내도록 하고 스크롤바로 볼 수 있게 한다.

여백이나 테두리 같은 것은 인용구 컴포넌트에 있으니 그걸 그대로 사용하고 위에서 말한 세가지 사항을 추가한 것이 글 상자 컴포넌트이다.

글 상자 컴포넌트에서 사용되는 설정값들은 글 상자를 만들 때마다 설정할 수도 있지만, 컴포넌트 설정에서 초기 기본값을 정해놓으면 편하게 사용할 수 있다. 초기 기본값을 지정해놓으면 글 상자를 만들 때 이 기본값이 사용되므로, 같은 설정값으로 글 상자 컴포넌트를 자주 사용하는 사람이나 나 같이 게으른 사람에게는 조금이나마 편한 기능이 되지 않을까 싶다.



이 초기값은 처음 글 상자를 작성할 때 쓰이는 값이지 글 상자 설정값이 작성된 이후에는 적용되지 않는다.

아래 그림은 에디터에서 글 상자를 작성하기 위해 설정하는 화면이다.



보면 알겠지만, 사용 방법은 인용구 컴포넌트와 거의 비슷하다. 몇가지 추가된 설정값이 있고, 초기 기본값을 지정해줄 수 있다는 것을 제외하면 사용하는데는 별 차이가 없다.

아래 단락은 글 상자 컴포넌트를 사용해 작성한 것이다.



설치 방법은 간단하다. 첨부된 압축 파일을 다운로드해서 압축을 풀면 textbox 라는 디렉토리가 나온다. 이 디렉토리를 zbxe/modules/editor/components 디렉토리에 통채로 옮겨놓으면 된다. 그런 다음 관리자 설정 화면의 "위지윅 에디터" 설정 화면으로 들어가 하단에 있는 textbox 컴포넌트를 활성화시켜주면 된다.


사실 글 상자 컴포넌트에는 문제점이 하나 있다. 아, 물론 파악하지 못한 문제점은 더 많을 지도 모른다. :)

무엇인고 하니, 위 설정에서 "줄 바꿈"을 하지 않을 경우 스타일에 "white-space: nowrap; overflow: hidden"을 추가하도록 되어 있는데, IE6에서는 이 녀석이 제대로 동작하지 않는다. 극악의 브라우저 IE6!! 이걸 해결하고자 이런 저런 시도를 해보았으나 결국은 그냥 그대로 두는 쪽으로 결정했다.