질문/공유공개자료실 "에디터/컴포넌트"
에디터/컴포넌트

템플릿 컴포넌트

윤삼
추천 수 1 댓글 92
Extra Form
자료 소개 미리 완성된 서식(템플릿)으로 게시물을 작성할 수 있도록 도와주는 에디터 컴포넌트입니다.
설치 경로 ./modules/editor/components/ap_template
테스트 환경 XpressEngine1,Rhymix 1.x
라이선스 GPL v2
크게 작게 위로 아래로 댓글로 가기
이름 버전 날짜 다운수
ap_template.0.1.0.zip 0.1.0 2018-06-19 293

 

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

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

 

demo.gif

 

 

기본 기능

 

- 원래는 회원 발송용 뉴스레터 템플릿을 제공하기 위해 만들었던 컴포넌트입니다. 관리자 메일 모듈과 같이 쓰면 좋습니다.( 0.5 버전 https://xetown.com/point_contents/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/topics/729982

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

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

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

 

 

데모

 

- 라이믹스 1.9.6 / CKEditor4 / PHP 7.0.22

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

 

제작자 윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
위로 아래로
댓글 92
  • profile

    윤삼님 좋은 자료 매번 정말 감사합니다.
    덕분에 정말 많은 도움 되고 있습니다.
    정말 감사합니다.1f44d.png

  • profile
    최고입니다. 선추천
  • profile
    xpresseditor는 지원안하나요?
  • profile profile
    네, 지원하지 않습니다.
  • profile
    감사히 잘쓰겠습니다 ^^
  • profile
    초보자에겐 좋은 자료 같아요~~^^
  • profile
    좋은 자료 감사합니다. 잘 쓰겠습니다.
  • ?
    금일 테스트를 했는데 xe 1.11.5 버전 PHP Version 7.0.33엔데 컴포넌트를 설치를 하면 에디터창 글쓰기 부분(입력창부분)이 없어져 버리네요. 저만 그런걸까요?
  • ? profile
    ck에디터를 외부 cdn으로 불러오는데 그 부분에서 문제가 있을지 모르겠어요.
  • ?
    넘나 유용한 자료같습니다. 감사드립니다.
  • ?
    템플릿을 회원들이 새로만들어 등록하고 잘 사용중입니다.
  • ? profile
    정말요? 완전 감개무량입니다ㅜ
  • ?
    다양한 용도로 유용한 자료 감사합니다
  • ?
    제가 로컬서버로 내부망에서 사용중인데, 혹시 외부 사이트를 통해 js를 불러오는 소스가 있나요?
    추가 버튼 클릭 시 안되네요..
  • ?
    popup.js?20181013205119:130 Uncaught TypeError: Cannot read property 'id' of undefined
    at editorReplaceHTML (/modules/editor/skins/ckeditor/js/xe_interface.min.js?20180801170348:1)
    at popup.js?20181013205119:130
    at Object.success (xe.min.js?20180607155534:6)
    at l (jquery.min.js?20180918193747:3)
    at Object.fireWith [as resolveWith] (jquery.min.js?20180918193747:3)
    at k (jquery.min.js?20180918193747:5)
    at XMLHttpRequest.<anonymous> (jquery.min.js?20180918193747:5)

    F12 크롬 개발툴 오류 내역입니다,,
  • ?
    감사합니다.
    잘 사용하겠습니다.
  • profile
    윤삼님~감사합니다! 요긴하게 잘쓰겠습니다~~
  • profile profile
    네, 잘 써주세용~
  • ?
    고맙습니다 잘쓰겠습니다.
  • ? profile
    유용하게 써주신다면 제가 감사하죠ㅎㅎ
  • profile
    감사합니다.
    잘사용하겠습니다.
  • profile profile
    여유 되시면 템플릿 만들어서 슝~하고 공유 좀 해주세요ㅎㅎ
  • ?
    감솨합니다.^^
  • ? profile
    ㅎㅎ 많이 애용해주세요~
  • ?
    너무나 잘 사용하고 있습니다.
    활용도에 따라서 무궁무진한 템플릿들이 만들어 질 수 있을 것 같네요.
    근데 한가지 아쉬운 점이 템플릿을 만들어서 배포를 해도 윤삼님의 원프로그램이 포인트가 있는 관계로
    엑스이타운 처음 가입하거나 포인트가 없는 분들은 사용이 불가하네요.
    이런 좋은 프로그램은 많은 사람들이 사용해야 탬플릿도 만들어지고 활용도가 높아지는 것 아닌가요.
    포인트를 약하게 하거나 무료로 전환하실 생각은 없어신지...
    너무나 좋은 프로그램을 포인트가 없어서 사용을 못하는 분들을 위해 주책없게 한마디 남깁니다.
  • ? profile
    ㅎㅎ 안 그래도 리워드 이벤트가 끝나면 적절한 시점을 봐서 무료로 전환할 생각을 하고 있었어요. 좋은 말씀 감사합니다~
  • profile
    지원하지 않는 에디터 스킨입니다. XE - ckeditor 에서 발생합니다.
    에디터의 폴더이름을 ckeditor2라고 변경해서 쓰고 있는데 이때도 발생 할지요?
  • profile profile
    네, 그럴 겁니다.
    tpl.js 파일을 수정하는 방법이 있는데, 에디터 스킨을 개조하신 경우 에러가 있을 수도 있을 거예요.
    일단 이렇게 고쳐보시죠.
    tpl 폴더 tpl.js 파일의 18행을
    if ( skin !== 'ckeditor' && skin !== 'ckeditor2' && skin !== 'froalaeditor' )
    으료 바꾸고요.
    121행은
    if ( skin == 'ckeditor' || skin == 'ckeditor2' )
    으로요.
  • profile profile
    ap_template/tpl 폴더 내의
    popup.js 파일에 해당 내용으로 수정하여 적용 되었습니다. 감사합니다.
  • profile
    문서 양식 적용하기 좋을거 같아 구매 합니다. 감사합니다.
  • ?
    잘사용하겠습니다..ㅠㅠ
  • ? profile
    https://xetown.com/board/1033675
    8월 말까지 이벤트도 있으니 참조해주세요~
  • ?
    오..뉴스레터용으로 활용을 한번 해봐야겠네요. 자료 감사합니다.
  • ? profile
    네, 이용해주셔서 감사합니다!
  • ?
    감사합니다 잘쓰겠습니다
  • ? profile
    저야말로 감사합니다 :)
    https://xetown.com/board/1033675 이벤트도 진행 중이니 참조해주세요~
  • ?
    좋은 자료 감사합니다~!
  • ? profile
    넵, 감사합니다!
  • profile
    ㄷㄷㄷ 고삼다음 윤삼님의 끝은 도대체가 ㄷㄷㄷ
  • profile profile
    어쩌다보니 이렇게 되었어요 으흐흐흑;;
  • profile
    활용도가 무궁무진하네요~ 감사합니다.
  • profile
    열흘을 기다려서 구매완료. 적용 잘되고 정말 편리합니다. 이제 템플릿 만드느라 시간 가는 줄 모르겠네요.
  • profile profile
    ㅎㅎ 멋진 템플릿 만드시면 꼭 소개해주세요~!
  • profile
    오~~~~
    멋진작품 또 만드셨군요..감사히 잘 쓰겠습니다..^^
  • profile profile
    혹시 쓸 만한 템플릿 스킨 생기시면 공유 부탁 드려요. 널리 알립시다ㅋ
  • profile
    cheditor만 되나보군요 ㅜ

    xprsseditor에 사용하려니 안되니 잠깐..보류를 합니다 <
  • profile profile
    네ㅜㅜ 주의사항에 적은 것처럼 ck에디터랑 프로알라 에디터만 지원해요;;
  • ?
    우와~~~ 감격스럽네요. 템플릿 샘플들이 공지나 뉴스 외에 추모나 기념, 편지 등등 좀 많아지고 다양해지면 게시판에 새로운 바람이 불겠네요. 헐.... 윤삼님 존경합니다.
  • ? profile
    네ㅎㅎ 템플릿이 더 많아지길 기대해봅니다!
  • profile
    오..
  • profile
    매번 글 작성 시마다 같은 포맷 만드는 것 귀찮고, 다른 글에서 복사해 쓰는 것도 번거로웠는데..
    최고입니다. 원하는 템플릿 만들어 사용할 수 있다는 게 참.. 대단합니다.

    다시한번 감사 드립니다.

    ps. 에디터 각주 컴포넌트도 정말 유용하게 사용 중입니다. ^^;;
  • profile profile
    흐흐흑ㅜ XE/라이믹스가 게시판 사이트 이상의 CMS가 될 수 있단 걸 보여줍시다! (... 읭?)
  • profile
    아이고 이고 구입하고 싶은데 포인터가 부족하네요.
  • profile profile
    ㅎㅎ 타운 활동 잘 부탁 드려요!
  • ?
    좋군요~ 잘 사용하겠습니다.
  • ? profile
    애용 잘 부탁 드립니다!
  • profile
    구매완료!! 정말 대단하세요. ^^
  • profile profile
    필요하니까 만드는 거죠 뭐 히힛. 마시마로님 다음 작품도 기대합니다!
  • ?
    좋은 자료 감사드려요~
  • ? profile
    잘 활용해주세용~
  • profile
    글쓰기 주인 제 사이트에 정말 필요하고 적합한 틀립니다.
    정말 감사합니다
    출장 중이라 복귀 후 바로 설치해서 나만의 템플릿도 만들어 봐야겠어요 ㅎㅎ
    다시.한번 감사를 ~~~♡♡♡♡♡♡♡
  • profile profile
    알림 메시지에 ~~ 틀립니... 라고 나와서 깜짝 놀랐어요ㅎㅎㅎ
  • profile profile
    이런 죄송합니다. 스마트폰이 제멋대로 철자를 수정해 버렸네요 ㅎㅎ
    올리기 전에 다시 확인했어야 했는데 ^^;;

    얼른 출장 마치고 돌아가 적용해 봐야겠어요..
  • profile profile
    얼른 돌아오셔요ㅋㅋㅋ
  • profile
    와...이 자료는 정말 필요한 자료입니다. 그동안 애타게 기다렸었던...감사합니다.^^
  • profile profile
    네ㅎㅎ 많이 애용해주세용~
  • ?
    수고하셨어요. 보자마자 바로 다운 받았습니다^^
  • ? profile
    네 감사합니다. 나중에 좋은 템플릿 만드시면 포인트 마켓에서 판매도 해주세요ㅎㅎ
  • profile
    기다렸습니다!
  • profile profile
    기다린 만큼 쓸모가 있어야 할 텐데요. 잘 응용하시면 좋을 거 같아요.
  • ?
    최고입니다! ㅎㅎ
  • ? profile
    감사합니다 :)
  • profile
    이거야 말로 짱이네요! 갓갓 윤삼님!
  • profile profile
    부디 널리 활용되기 바라는 마음입니다ㅎㅎ
  • profile
    구매했습니다. 감사합니다.
  • profile profile
    우왓 감사합니다. 잘 활용되면 좋겠습니다~
  • profile
    고맙습니다. 윤삼님 저도 구매 했습니다.
  • profile profile
    넵! 감사합니다~
  • profile
    전 아직 쓸일은 없는데 일단 샀습니다 @@
  • profile profile
    아이고, 감사합니다~ ^^/
  • profile

    .

  • profile profile
    포인트 벌었으니 제가 감사하죠 ;)
  • profile
    오우야...
  • profile profile
    구매 ㄱㄱ 하시는 겁니까ㅋㅋㅋ
  • profile
    와...완전 편리합니다.
    매일 포스팅하는 틀이 있는데 매번 카피붙여넣하면 사용했는 데
    이 자료로 쉽게 템플릿 불러와서 쓸 수 있게되었네요!!
  • profile profile
    새로 템플릿 만드실 땐 이 글 본문의 "템플릿 등록 방법"을 꼭 봐주세용~
  • profile
    바로구매완료 +_+
  • profile profile
    이슈 생기면 언제든 말씀해주세요~
  • profile profile
    글쓰기 눌렀을때 바로 특정 템플릿을 불러오는 방법도 있을까요? 이건 에디터에서 설정해야하려나..ㅋㅋ;;
  • profile profile
    네ㅎㅎ 그건 별도로 애드온을ㅎㅎ
  • profile profile
    윤삼님의 다음 애드온으로 추천입니다?!
  • profile profile
    으흐흐흐흐....
목록