글꼴, 줄 간격, PRE 스타일 등을 지정할 수 있는 글 상자를 작성합니다.
  • 설치 위치 : zbxe/modules/editor/components/ 하위 디렉토리
  • 기본값 설정 및 활성 : 관리자 화면 - 기능성 모듈 - 위지윅 에디터 - 글 상자


글 상자를 작성하는 방법으로 이미 인용구 작성과 라운드 박스 작성 컴포넌트가 있습니다만, 글꼴 지정과 PRE 스타일의 글 상자를 작성하기에는 불편하기에 인용구 컴포넌트를 기반으로 새로운 컴포넌트를 만들었습니다.

인용구 컴포넌트를 기반으로 하기 때문에 글 상자 컴포넌트에서 추가된 기능 외에는 인용구 컴포넌트와 거의 비슷한 동작을 합니다.

우선, "관리자 화면 - 기능성 모듈 - 위지윅 에디터 - 글 상자"에서 "설정"을 누르면 글 상자 컴포넌트의 초기 기본값을 설정할 수 있습니다. 이 화면에서 설정된 값들은 나중에 에디터에서 글 상자 컴포넌트로 글 상자를 처음 작성할 때 사용되는 기본값들입니다. 제가 워낙 게을러서 인용구 등을 작성할 때마다 자주 쓰는 값을 입력하는 것이 너무 귀찮아, 글 상자 컴포넌트를 만들면서 자주 쓰는 값을 기본값에 등록시켜 조금이라도 편해보고자 이 기본값 설정을 만들었습니다.

comp_textbox.gif


설정 후 "활성"을 체크해주면 에디터 상단 메뉴 중에 글 상자 아이콘이 생길 것입니다. 글 상자로 만들 단락을 블럭으로 선택한 후 글 상자 아이콘을 누르면 아래와 같은 글 상자 작성 화면이 나옵니다. 여기에서 필요한 설정을 한 후 "추가"하면 원하는 형태의 글 상자를 만들 수 있습니다.


editor_textbox.gif

만약, 컴포넌트 설정에서 기본값을 지정해두었다면, 글 상자 작성 화면에서 그 값들이 초기 설정값으로 사용됩니다. 물론 자신이 원하는 값으로 변경 가능합니다.

글꼴이나 줄 간격을 설정하지 않고 빈칸으로 남겨두면 게시판에서 사용되는 CSS의 값이 그대로 적용되지만, 글꼴이나 줄 간격을 따로 지정해주면 그 값이 글 상자 단락에 사용됩니다. 그리고, 줄 바꿈을 설정하지 않으면 PRE 스타일을 흉내내는 것으로 내부적으로는 스타일에 "white-space: nowrap; overflow: auto"가 추가됩니다.

IE6에서는 overflow 스타일에 버그가 있어서 제대로 나오지 않아 레이아웃이 깨질 수도 있습니다. 따라서, IE6를 주로 쓰시는 분은 가급적 줄 바꿈은 설정해두시는 것이 좋을 겁니다.


사용 예는 제 블로그를 보시면 있습니다. 잘못된 점이나 수정해야할 것이 있으면 제 블로그에 글 남겨주시면 감사하겠습니다.

이 게시물을..