자료실 상세소개
Xe자료실에 있는 자료들은 이곳 저곳에서 제가 필요하다고 생각되는 것들을 모아 놓은 게시판입니다.<br/> 저작권 관계로 자료들을 올리진 않습니다. 원래 사이트의 자료가 없어진 경우는 꼭 필요한 경우는 저에게 쪽지로 주시면 제가 가지고 있는 한도내에서는 보내 드리겠습니다.<br/>저작권침해가 되지 않는 경우에 한 합니다.
기타
2018.07.05 20:41

템플릿 컴포넌트

조회 수 111 추천 수 0 댓글 0
Extra Form
제작자 윤삼
출처 https://xetown.com/rxe_point/1000063
적용여부 적용

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

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

 

기본 기능

 

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

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

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

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

 

 

사용 방법

 

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

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

1.png

 

- 팝업창이 뜹니다.

2.png

 

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

3.png

 

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

4.png

 

 

템플릿 등록 방법

 

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

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

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

  5.png

- 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

?

XE Data

Xe자료실에 있는 자료들은 이곳 저곳에서 제가 필요하다고 생각되는 것들을 모아 놓은 게시판입니다.

  1. No Image

    문하우스 애드온들

    문하우스의 애드온 모음집 탭 위젯을 생성하게 해주는 에디터 컴포넌트 - 베타 버전 시험페이지 https://xetown.com/tips/1180004
    Date2019.02.25 Category애드온 Reply0 Views103
    Read More
  2. 미디어플레이어 애드온(MediaElement addon)

    MediaElement.js와 HTML5 video,audio 태그를 이용한 미디어 플레이어 및 유튜브 링크 애드온입니다. 당초에는 유튜브 뮤직을 링크시켜주는 애드온을 찾다고 없어서 시작했는데 일판이 좀 커졌네요. 애드온 이름을 몇번 바꾸다가 최종적으로 미디어플레이어 애...
    Date2019.02.09 Category애드온 Reply0 Views49 file
    Read More
  3. 드래그하여 페이지/문서 이동 애드온

    모바일 환경에서 드래그하여 페이지/문서를 이동할 수 있습니다. 1.1.1 코드 정리 조건문 타입에러 수정 기능적으로는 마지막 업데이트이지 않을까 싶습니다 불친절하게도 관리자설정이 따로 없습니다 tpl/index.html에서 터치영역을 직접 입력하여 사용하세요...
    Date2019.02.09 Category애드온 Reply0 Views40 file
    Read More
  4. jQuery Viewer 애드온(lightbox 계열, 확대축소 가능)

    이미지 클릭시 원본을 보여주는 애드온입니다. 다운로드 하지 않아도 확대 축소가 가능합니다. 기존의 Resposive Photoviewer 애드온을 대신합니다. https://github.com/fengyuanchen/viewer 참조 포토뷰어에 대한 욕심이 많아서 벌써 10여개의 포토뷰어 애드...
    Date2019.02.09 Category애드온 Reply0 Views25 file
    Read More
  5. responsive photo viewer 애드온

    https://github.com/nzbin/photoviewer#readme nzbin의 photoviewer를 XE에 적용한 애드온입니다. 본문내이미지조절 애드온을 끄고 사용하시기 바랍니다. 화면상에서 사진의 확대 축소가 가능하며 마우스 휠을 굴리면 사진의 확대 및 축소가 이루어집니다.
    Date2018.12.29 Category애드온 Reply0 Views43 file
    Read More
  6. 템플릿 컴포넌트

    - '템플릿 컴포넌트'입니다. - 미리 완성된 서식(템플릿)을 이용해 문서를 편집할 수 있게 해주는 에디터 컴포넌트입니다. 기본 기능 - 원래는 회원 발송용 뉴스레터 템플릿을 제공하기 위해 만들었던 컴포넌트입니다. GG님의 관리자 메일 모듈과 같이 쓰면 좋...
    Date2018.07.05 Category기타 Reply0 Views111 file
    Read More
  7. 가입권유 애드온 v2.3

    가입권유 애드온 1. 애드온이 html 상단에 출력되서 발생하던 css 문제를 수정했습니다. 2. 회원가입창등에서 뜨지 않도록 수정했습니다. 3. 로그인 이후에도 뜨는 문제 수정 4. 무료로 전환 (그동안 포인트 먹튀해서 죄송합니다 -_ㅜ ) 본업이 인터넷 관련직...
    Date2018.02.14 Category애드온 Reply14 Views338 file
    Read More
  8. 날씨 위젯

    현재 위치(지오로케이션)기반 날씨 위젯을 만들기로하고 일주일이 지났네요 @.@ 너무 오래 붙잡고 있으면 안될꺼 같아서 주말에 시간내서 마무리 지었습니다. 우선 배포하고 문제가 발견되면 추후 수정하는게 좋다는 생각입니다... ㅎㅎ 개인적으로 사용하던 ...
    Date2018.02.07 Category위젯 Reply0 Views302 file
    Read More
목록
Board Pagination Prev 1 2 3 4 5 ... 21 Next
/ 21
서버에 요청 중입니다. 잠시만 기다려 주십시오...