의뢰/마켓포인트 콘텐츠에디터/컴포넌트

내정보

Guest 님
보유포인트
0
  • 재구매 할인
    30%
  • 컨텐츠 환불
    100%
  • 평점 포인트
    10%
  • 포인트 자동책정
    0%
콘텐츠 수 260

템플릿 컴포넌트

최초 등록일: 2018.06.19 조회수 : 1100

무료

5.0점 / 총 35명 참여
  • 구매자 81
  • 소개 미리 완성된 서식(템플릿)을 이용해 문서를 편집할 수 있게 해주는 에디터 컴포넌트입니다. 
  • 설치경로 ./modules/editor/components/ap_template 
  • 지원환경 XpressEngine,Rhymix 
  • 라이선스 XPM License (재배포 금지) 
  • 분류 에디터/컴포넌트
  • 제작자 윤삼
  • 다운로드
    ap_template.0.1.0.zip 86.55KB (잔여일 : -, 잔여횟수 : -)

 

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

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

 

demo.gif

 

 

기본 기능

 

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

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

 

 

주의 사항

 

- 본 템플릿 컴포넌트는 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/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 (들어가서 -> 쓰기 버튼 -> 템플릿 컴포넌트 아이콘을 클릭하면 컴포넌트 팝업창이 뜸)

 

이 콘텐츠가 마음에 드셨다면 커피 한잔 (후원)

닫기
작가에게 커피 한잔(후원)을 사주세요.
profile 아픈 몸이
아프지 않을 때까지 가자

댓글 '80'

프로필 사진 profile
윤삼 2018.07.02 22:31 댓글 별점
ㅎㅎ 멋진 템플릿 만드시면 꼭 소개해주세요~!
프로필 사진 profile
산소아빠 2018.07.28 23:11 댓글 별점
활용도가 무궁무진하네요~ 감사합니다.
프로필 사진 profile
mist 2018.08.06 00:28 댓글 별점
ㄷㄷㄷ 고삼다음 윤삼님의 끝은 도대체가 ㄷㄷㄷ
프로필 사진 profile
윤삼 2018.08.06 01:22 댓글 별점
어쩌다보니 이렇게 되었어요 으흐흐흑;;
프로필 사진 profile
엔데벨 2018.08.06 17:27 댓글 별점
좋은 자료 감사합니다~!
프로필 사진 profile
윤삼 2018.08.06 19:02 댓글 별점
넵, 감사합니다!
프로필 사진 profile
주니사랑 2018.08.10 02:26 댓글 별점
감사합니다 잘쓰겠습니다
프로필 사진 profile
윤삼 2018.08.10 12:12 댓글 별점
저야말로 감사합니다 :)
https://xetown.com/board/1033675 이벤트도 진행 중이니 참조해주세요~
프로필 사진 profile
똑띠 2018.08.14 10:59 댓글 별점
오..뉴스레터용으로 활용을 한번 해봐야겠네요. 자료 감사합니다.
프로필 사진 profile
윤삼 2018.08.14 14:08 댓글 별점
네, 이용해주셔서 감사합니다!
프로필 사진 profile
프레임 2018.08.19 14:48 댓글 별점
잘사용하겠습니다..ㅠㅠ
프로필 사진 profile
윤삼 2018.08.19 15:05 댓글 별점
https://xetown.com/board/1033675
8월 말까지 이벤트도 있으니 참조해주세요~
프로필 사진 profile
토순이와아빠 2018.08.20 09:18 댓글 별점
문서 양식 적용하기 좋을거 같아 구매 합니다. 감사합니다.
프로필 사진 profile
토순이와아빠 2018.08.20 10:04 댓글 별점
지원하지 않는 에디터 스킨입니다. XE - ckeditor 에서 발생합니다.
에디터의 폴더이름을 ckeditor2라고 변경해서 쓰고 있는데 이때도 발생 할지요?
프로필 사진 profile
윤삼 2018.08.20 10:29 댓글 별점
네, 그럴 겁니다.
tpl.js 파일을 수정하는 방법이 있는데, 에디터 스킨을 개조하신 경우 에러가 있을 수도 있을 거예요.
일단 이렇게 고쳐보시죠.
tpl 폴더 tpl.js 파일의 18행을
if ( skin !== 'ckeditor' && skin !== 'ckeditor2' && skin !== 'froalaeditor' )
으료 바꾸고요.
121행은
if ( skin == 'ckeditor' || skin == 'ckeditor2' )
으로요.
프로필 사진 profile
토순이와아빠 2018.08.20 11:44 댓글 별점
ap_template/tpl 폴더 내의
popup.js 파일에 해당 내용으로 수정하여 적용 되었습니다. 감사합니다.
프로필 사진 profile
미이라 2018.08.21 13:56 댓글 별점
너무나 잘 사용하고 있습니다.
활용도에 따라서 무궁무진한 템플릿들이 만들어 질 수 있을 것 같네요.
근데 한가지 아쉬운 점이 템플릿을 만들어서 배포를 해도 윤삼님의 원프로그램이 포인트가 있는 관계로
엑스이타운 처음 가입하거나 포인트가 없는 분들은 사용이 불가하네요.
이런 좋은 프로그램은 많은 사람들이 사용해야 탬플릿도 만들어지고 활용도가 높아지는 것 아닌가요.
포인트를 약하게 하거나 무료로 전환하실 생각은 없어신지...
너무나 좋은 프로그램을 포인트가 없어서 사용을 못하는 분들을 위해 주책없게 한마디 남깁니다.
프로필 사진 profile
윤삼 2018.08.21 14:06 댓글 별점
ㅎㅎ 안 그래도 리워드 이벤트가 끝나면 적절한 시점을 봐서 무료로 전환할 생각을 하고 있었어요. 좋은 말씀 감사합니다~
프로필 사진 profile
그리다 2018.08.21 23:00 댓글 별점
감솨합니다.^^
프로필 사진 profile
윤삼 2018.08.22 16:03 댓글 별점
ㅎㅎ 많이 애용해주세요~
프로필 사진 profile
pjk 2018.08.22 14:16 댓글 별점
감사합니다.
잘사용하겠습니다.
프로필 사진 profile
윤삼 2018.08.22 16:04 댓글 별점
여유 되시면 템플릿 만들어서 슝~하고 공유 좀 해주세요ㅎㅎ
프로필 사진 profile
쭈박이 2018.08.30 06:38 댓글 별점
고맙습니다 잘쓰겠습니다.
프로필 사진 profile
윤삼 2018.08.30 17:28 댓글 별점
유용하게 써주신다면 제가 감사하죠ㅎㅎ
프로필 사진 profile
uglyduck 2018.09.26 19:22 댓글 별점
윤삼님~감사합니다! 요긴하게 잘쓰겠습니다~~
프로필 사진 profile
윤삼 2018.09.26 20:56 댓글 별점
네, 잘 써주세용~
프로필 사진 profile
시사랑 2018.10.07 17:30 댓글 별점
감사합니다.
잘 사용하겠습니다.
프로필 사진 profile
앙김옥찌 2018.10.13 21:06 댓글 별점
제가 로컬서버로 내부망에서 사용중인데, 혹시 외부 사이트를 통해 js를 불러오는 소스가 있나요?
추가 버튼 클릭 시 안되네요..
프로필 사진 profile
앙김옥찌 2018.10.13 21:09 댓글 별점
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
펀조아 4시간 전 댓글 별점
다양한 용도로 유용한 자료 감사합니다
서버에 요청 중입니다. 잠시만 기다려 주십시오...