자료 정보
버전 내역
상세 설명
- '템플릿 컴포넌트'입니다.
- 미리 완성된 서식(템플릿)을 이용해 문서를 편집할 수 있게 해주는 에디터 컴포넌트입니다.
기본 기능
- 원래는 회원 발송용 뉴스레터 템플릿을 제공하기 위해 만들었던 컴포넌트입니다. 관리자 메일 모듈과 같이 쓰면 좋습니다.( 0.5 버전 https://xetown.com/point_contents/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, staris에디터에서 작동합니다.
- 단, 프로알라 에디터의 경우에는 요소가 삽입될 경우 요소 앞뒤로 p태그가 자동으로 추가되므로 CKEditor4와 에디터 반영 결과가 다소 다를 수 있습니다.
테스트 환경
- 크롬 131.0.6778.265(공식 빌드) (64비트)
- 크롬 66.0.3359.181 / IE 11.48.17134.0 / 엣지 42.17134.1.0
- 라이믹스 2.1.20 / PHP 버전: 7.4 ... CKEditor4
- 라이믹스 2.1.20 / PHP 버전: 8.2 ... CKEditor4
- 라이믹스 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
- 2018년 6월 19일 0.1.0 버전 공개
- 2025년 1월 25일 0.2.0 버전 업데이트 : php 8.x 버전에 대응(기진곰님/팔공산님), staris 에디터 적용 (클라드룹님)
데모
- 라이믹스 2.1.20 / CKEditor4 / PHP 7.4
- https://dev.aporia.blog/board_Component_Template (들어가서 -> 템플릿 컴포넌트 아이콘을 클릭하면 컴포넌트 팝업창이 뜹니다)
![1.png [File Size:8.6KB/Download:60]](/files/download/link/1000064/e1744b2043685000fa864c7234d0b6a1/1.png){kind=link}
![2.png [File Size:136.9KB/Download:63]](/files/download/link/1000065/e4470562db138ce80181b7244285bbc7/2.png){kind=link}
![3.png [File Size:322.7KB/Download:64]](/files/download/link/1000066/ed971a58b393fc457b22e78a37e656ef/3.png){kind=link}
![4.png [File Size:254.1KB/Download:74]](/files/download/link/1000121/808d4a078ffe1f4704ead6bdddceac60/4.png){kind=link}
![5.png [File Size:2.8KB/Download:59]](/files/download/link/1000267/de4919fd12294ffbd422da815dde3744/5.png){kind=link}
![demo.gif [File Size:5.71MB/Download:104]](/files/download/link/1000277/8bee539573c69d8d0f8bcebd775cd00c/demo.gif){kind=link}
사용자 피드백 112
유용하게 잘사용하던건데 :)
자료 유지 보수를 해야지, 하는 생각은 있는데 그게 마음 먹은 것처럼 탄력을 받지는 못하더라구요;;
오.. 좋네요. staris 에디터도 되면 좋겠네요. 설치해봤는데 최신 라이믹스+staris 에이터 조합에서는 작동하질 않고 있습니다. ㅎ
추신 : 아래 댓글에 sraris 에디터에서도 사용할 수 있도록 수정하는 부분이 있네요. 해보니 잘 작동합니다. 감사합니다.
에디터에 템플릿으로 넣을 수 있으니 좋습니다. 잘 활용하면 확장변수만큼은 아니지만 요긴하게 사용할 수 있을거 같습니다. 다시한번 감사드립니다. ^^
php 8.2 에서 ap_template.class.php
36, 37줄 부분 오류나서 삭제하니 작동은 합니다.
$oXmlParser = new XmlParser();
$xml_info = $oXmlParser->parse($xml)->template;
근데 info.xml안의 정보들,
템플릿 제목과 제작자등을 불러오질 못하네요.
그래도 일단은 작동은 되니 사용할 만 합니다.
잊고 있었는데;; 상기시켜주셔서 감사합니다!
claude의 힘을 빌려서 php8.2에서 정상 작동되게 수정했습니다.
이렇게 라도 윤삼님의 힘을 덜어 드려야겠죠.
요새 많은 분들이 새로운 에디터들이 만드셔서 너무 좋은데, 아쉽게도 템플릿 컴포넌트가 오직 CKEditor4와 FroalaEditor, staris에디터에서만 작동하는 문제가 있어 다른 에디터들을 사용하시지 못하는 분들이 계신거 같아요.
다음 부분을 수정하면 어떤 에디터든 사용 가능할 거 같습니다. (모두 테스트한 거 아님)
/modules/editor/components/ap_template/tpl 에서 popup.js
18번째 줄
if ( skin !== 'ckeditor' && skin !== 'froalaeditor' && skin !== 'editorxe' )
{
alert(msg_not_support);
winClose();
}
를 찾으셔서 이 부분을 주석 처리
/*
if ( skin !== 'ckeditor' && skin !== 'froalaeditor' && skin !== 'editorxe' )
{
alert(msg_not_support);
winClose();
}
*/
119번째 줄
if ( type === 'overwtite' )
{
if ( skin == 'ckeditor' )
{
$(editor_obj).find('iframe').contents().find('.xe_content').html('');
}
else if ( skin == 'froalaeditor' )
{
window.opener.$(editor_obj).froalaEditor('html.set', '');
}
}
를 찾으셔서 이 부분을 다음과 같이 교체
if ( type === 'overwtite' )
{
if ( skin == 'ckeditor' )
{
$(editor_obj).find('iframe').contents().find('.xe_content').html('');
}
else if ( skin == 'froalaeditor' )
{
window.opener.$(editor_obj).froalaEditor('html.set', '');
}
else
{
window.opener.editorReplaceHTML(editor_obj, '');
}
}