추천 수 3 댓글 98
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 303

 

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

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

 

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 정도가 좋습니다.

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

 

 

주의 사항

 

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

- 단, 프로알라 에디터의 경우에는  요소가 삽입될 경우 요소 앞뒤로 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
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • ?
    게시판 스킨과 연계해서 디폴트로 특정 템플릿 스킨이 셋팅되는 형태가 되면 어떨까요?
    일반적으로 템플릿 스킨을 사용하는 게시판의 경우 대부분 특정 스킨을 공통적으로 사용한다는 가정이라면
    별도로 템플릿 컴포넌트를 열어서 템플릿 스킨을 선택해서 사용하기보단 처음부터 해당 템플릿 스킨이 글쓰기 화면에 등록되어 노출되는 상태라면 활용도가 좋아지지 않을까해서.

    게시판 스킨에 별도로 디폴트 선택 옵션을 하나 둬서 선택 여부를 결정하면 될듯한데.
    활용도 측면을 생각해보다 아이디어겸 생각나서 글남겨 봅니다.
  • profile
    이 자료는 혁신입니다. 이 자료가 좀 더 개발된다면 위젯페이지는 더이상 쓸모없게 됩니다. 워드프레스의 Elementor나 Wpbakery와 같은 상품으로 더 개발할 의향이 없으신지요? 테마 개발자들도 하위 템플릿을 만들어서 판매하면 라이믹스 생태계가 완전히 바뀌게 될 것 같습니다. 유료로라도 라이센스를 여러개 만들어서 판매해보시면 어떨까요? 이 상품이 계속 디벨롭되면 저같으면 워드프레스는 사용하지 않을 것 같습니다.
  • profile profile
    네, 제작 당시에도 페이지 빌더 이야기가 나왔던 것으로 기억합니다.
    다만 워드프레스에서만큼 역동적인 UI를 구현하기에는 역량이 부족하기도 했고, 그런 상황이더라도 템플릿들이 제작/공유라도 됐으면 이런저런 불편사항이나 개선사항이 알려지고 추가적인 개선도 이뤄졌을 것 같은데 안타깝게도 그러지는 못했어요.
    일단 괜찮을 템플릿 페이지라도 몇 개 만들어서 더 얹어볼까요? ㅎㅎ
  • profile profile
    네네!!! 슬라이더나 아코디언 UI처럼 항목을 추가할 수 있는 템플릿도 가능하다면... 그냥 끝일 거 같습니다.
  • profile

    이런 멋진 자료에 추천이 1이라니 우선 추천 클릭해요~

     

    modules/editor/components/ap_template/tpl/popup.js  파일에서 17라인

     

    if ( skin !== 'ckeditor' && skin !== 'froalaeditor' ) 

     

    위 코드로 인해 staris 에디터에서 잘 작동하지만 지원하지 않는 에디터라고 경고창뜨고 팝업이 닫히네요;

    staris 에디터 사용하시면 아래와 같이 17라인을 수정해주시면 되겠습니다.

     

    if ( skin !== 'ckeditor' && skin !== 'froalaeditor' && skin !== 'editorxe')

     

    1.png

  • profile profile
    앗 좋은 말씀과 유익한 정보 감사합니다.
    (옛날에 유료 포인트 자료로 시작해서 아마 추천이 없을 거예요ㅎㅎ)
  • 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
    으흐흐흐흐....