템플릿 컴포넌트

- '템플릿 컴포넌트'입니다.

- 미리 완성된 서식(템플릿)을 이용해 문서를 편집할 수 있게 해주는 에디터 컴포넌트입니다.

 

기본 기능

 

- 원래는 회원 발송용 뉴스레터 템플릿을 제공하기 위해 만들었던 컴포넌트입니다. GG님의 관리자 메일 모듈과 같이 쓰면 좋습니다.( 0.5 버전 https://xetown.com/rxe_point/278628 , 깃허브에는 0.6도 있습니다ㅎ )

- 그 외에도 컴포넌트 이용자가 템플릿을 직접 만들어 활용할 수 있으므로, 견적서, 증빙서류 등 정해진 서식을 출력할 때 활용하는 것도 좋을 것 같습니다.

- 풀 페이지, 헤더, 섹션, 푸터 등 4가지 타입의 템플릿을 제공합니다.

- 해당 템플릿을 에디터 내 원하는 위치에 삽입할 수 있으며, 전체 덮어쓰기도 할 수 있습니다.

 

 

사용 방법

 

- CKEditor4 기준으로 설명합니다.

- 보라색 부분의 아이콘을 누릅니다.

 

- 팝업창이 뜹니다.

 

- 썸네일 리스트의 원하는 템플릿을 골라 에디터에 '추가'하거나 '덮어쓰기'를 하면 에디터에 이렇게 적용됩니다. (템플릿 요소(li)를 더블클릭하면 에디터 커서 위치에 '추가'가 됩니다)

 

- 물론 이미지나 글 내용을 수정할 수도 있습니다.

 

 

템플릿 등록 방법

 

- 컴포넌트 폴더에 templates 이라는 폴더가 있는데요. 이 안에 템플릿 문서 파일이 있는 하위폴더들이 있습니다.

- 하위폴더의 이름은 템플릿들의 이름이기도 합니다.

- 각각의 하위폴더에는 기본 제공되는 폴더에 있는 것처럼 index.html, info.xml, thumb.jpg가 있어야 합니다.

  

- index.html은 템플릿의 html 코드를 담고 있습니다. 참고로, 기본 제공되는 템플릿은 뉴스레터 이메일 용으로 제작 중인 것이어서 기본적으로 인라인 스타일을 일괄적용하고 있습니다.

- info.xml은 템플릿의 정보를 담고 있습니다. 기존 파일을 열어보시면 아시겠지만, admin, full_page, header, section, footer에 관한 정보가 필수적으로 들어가야 합니다.

• admin 값이 Y면 관리자만 템플릿을 적용할 수 있습니다. N이면 에디터 이용자 모두가 볼 수 있구요.
• full_page 값이 Y면 전체 문서에 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요.
• header 값이 Y면 문서의 머리말로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요.
• section 값이 Y면 문서의 본문으로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요.
• footer 값이 Y면 문서의 꼬리말로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요.

- thumb.jpg는 팝업창에서 출력하는 템플릿 리스트에서 출력할 썸네일입니다. 크기는 대략 120*100px 정도가 좋습니다.

=> 이렇게 준비하시면 여러분도 템플릿을 등록해서 언제든 꺼내서 사용하실 수가 있게 되는 겁니다.

 

 

주의 사항

 

- 본 템플릿 컴포넌트는 CKEditor4와 FroalaEditor에서 작동합니다.

- 단, 프로알라 에디터의 경우에는  요소가 삽입될 경우 요소 앞뒤로 p태그가 자동으로 추가되므로 CKEditor4와 에디터 반영 결과가 다소 다를 수 있습니다.

 

 

테스트 환경

 

- 크롬 66.0.3359.181 / IE 11.48.17134.0 / 엣지 42.17134.1.0

- 라이믹스 1.9.6 / PHP 버전: 7.0.22 ... CKEditor4

- XE 1.9.7 / PHP 버전: 5.5 ... FroalaEditor

- 스포어 웹호스팅, 카페24 웹호스팅

 

 

히스토리

 

- 2017년 9월 11일 "신기하네요. 레이아웃 만들기" https://xetown.com/rxe_story/729982

- 2017년 9월 13일 "재미난 녀석을 만들고 있습니다 ... 템플릿 컴포넌트" https://xetown.com/rxe_story/731957

- 2018년 6월 14일 "템플릿 컴포넌트 순항 중ㅎㅎ" https://xetown.com/board/996760

- 2018년 6월 17일 "XE에서 컴파일이 안돼요ㅠ(라이믹스에서는 되구요)" https://xetown.com/qna/998893

 

 

데모

 

- 라이믹스 1.9.6 / CKEditor4 / PHP 7.0.22

• https://bit.ly/2IECAeU (들어가서 -> 쓰기 버튼 -> 템플릿 컴포넌트 아이콘을 클릭하면 컴포넌트 팝업창이 뜸)

 

문하우스에서 만든 템플릿들

- https://moonhouse.co.kr/index.php?mid=xemy&search_target=tag&search_keyword=MH+%ED%85%9C%ED%94%8C%EB%A6%BF