skinWysiwyg

1. wysiwyg.css 파일은 글쓰기의 에디터에서 위지윅 화면 스타일을 제어하는 스타일 파일입니다. 에디터의 위지윅 화면은 내부적으로 iframe으로 구현되어 있기 때문에 완전히 별개의 HTML 파일로 볼 수 있으며 이 HTML 파일의 style 파일로 wysiwyg.css가 사용됩니다.
2. 스킨에 wysiwyg.css 파일이 포함되어 있지 않으면 기본적으로 내장되어 있는 default-wysiwyg.css 파일을 사용하도록 되어 있습니다.
3. wysiwyg.css 파일이 제어하는 부분은 skin.html에서 ![##article_rep_desc##]로 출력되는 부분입니다(기본스킨인 coolant로 따지면 '.article *' 부분). wysiwyg.css에는 이 부분을 제어하는 CSS와 동일한 내용이 포함되어 있어야 합니다. 다음은 예제입니다.

[style.css] - 1.5부터는 style.css라는 이외에의 파일명도 사용하실 수 있도록 변경되었습니다. 단, 현재 티스토리와는 호환되지 않습니다.(스킨 편집에서 문제 발생)

.article h1
{
	color: red;
}

.article fieldset
{
	border: 1px solid blue;
}

이것을 wysiwyg.css로 동일하게 옮기시되,

[wysiwyg.css]

h1
{
	color: red;
}

fieldset
{
	border: 1px solid blue;
}

처럼 하시면 됩니다. CSS에 대한 지식이 있으시면 쉽게 이해하실 수 있으시리라 생각합니다.

1. wysiwyg.css에는 기본 태그들 이외에도 특수한 클래스들에 대한 스타일이 지정되어야 합니다. 다음은 그 목록입니다.

• .tattermoreless (더보기 영역)
• img.tatterImageLeft (좌측 정렬 이미지)
• img.tatterImageCenter (중앙 정렬 이미지)
• img.tatterImageRight (우측 정렬 이미지)
• img.tatterImageDual (2장 입력 이미지)
• img.tatterImageTriple (3장 입력 이미지)
• img.tatterImazing (이메이징 영역)
• img.tatterGallery (갤러리 영역)
• img.tatterJukebox (MP3 플레이어 영역)
• img.tatterImageFree (자유 삽입 이미지)
• img.tatterEmbed (embed 영역)
• img.tatterObject (오브젝트 영역)
• img.tatterFlash (플래시 파일 영역)

각 클래스의 활용은 /skin/coolant/wysiwyg.css, /style/defailt-wysiwyg.css 파일을 참고하십시오.

1. wysiwyg.css의 body 영역의 가로/세로 값을 사용하지 마십시오. 이는 기본적으로 스킨의 index.xml을 분석하여 에디터가 자동으로 맞춰주고 있습니다. 만약, 이를 강제로 wysiwyg.css에서 지정할 경우, CSS 지식이 없는 사용자가 스킨을 커스터마이징하는데 많은 애로를 겪을 수 있습니다.
2. wysiwyg.css의 body 영역의 가로/세로 값 이외의 margin/padding은 적절히 상황에 맞게 사용하실 수 있습니다만, 이 역시 복잡한 구현을 위해 비정상적으로 활용하시는 것은 권하지 않습니다.
3. 일부 브라우저에서 iframe의 변경사항을 바로 반영하지 않는 cache 갱신 지연 문제가 있을 수 있습니다. 이 경우, 마우스를 위지윅 에디터 영역에 올려놓으시고 마우스 오른쪽 버튼을 눌러 나타나는 메뉴에서 '화면갱신' 명령을 내리시면 대부분의 경우 해결하실 수 있습니다.