홈토리 에디터는 다른 에디터와 연동해서 사용이 가능합니다.

아래의 홈토리-스마트 에디터는 홈토리 에디터와 스마트 에디터를 연동해서 사용하는 에디터로

스마트 에디터로 이미지를 작성하는 도중에 홈토리 에디터를 이용하여 다양한 이미지를 편집하여 스마트 에디터를 삽입하는 것이 가능합니다.

홈토리 - 스마트 에디터

홈토리 에디터와 스마트 에디터를 연동해서 사용하는 에디터 

2027년 홈토리 에디터 구매자 분들을 위해 무료 공개 예정

https://demo.mangboard.com/hometory-smart/

Iframe과 Script 공유방식 2가지 모두 사용이 가능하실 경우에는 Script 방식을 이용해서 공유하는 것을 추천드립니다.

Script 공유방식은 공유되는 콘텐츠가 외부 콘텐츠라는 느낌없이 내부에서 제작된 것과 동일하게 최적화되어 동작합니다.

Iframe 공유방식은 반응형은 지원하지만 공유할때 iframe의 높이를 설정해야 하기 때문에 모바일에서 콘텐츠 하단에 공백이 발생할 수 있고,

Iframe으로 설정된 넓이가 작은 상태에서 마우스 오른쪽 버튼을 클릭 할 경우 팝업 일부가 잘려서 보이는 문제가 발생할 수 있습니다.

※ Iframe 공유시 공유하는 사이트에 아래 스크립트를 추가해 주시면 모바일에서도 iframe 높이가 자동으로 설정되어 하단에 공백이 발생하는 문제를 해결하실 수 있습니다.

(스크립트를 추가하기 위해서는 공유하는 사이트에 관리자 권한 필요)

<script type="text/javascript">(function() {window.addEventListener("message",function(e){var iframes= document.querySelectorAll('iframe');var sendingIframe = Array.from(iframes).find(iframe => {return iframe.contentWindow === event.source; });if(sendingIframe && e.data){if(e.data.hte_height){sendingIframe.style.height=e.data.hte_height+"px";}else if(e.data.hte_scroll){ window.scrollBy({top: e.data.hte_scroll,left: 0,behavior: "smooth"}); } }},false);})();</script>

홈토리 에디터로 제작된 콘텐츠는 용량이 큰 모션 이미지(GIF)를 많이 사용하고 있고,

다양한 공유 기능을 통해 소셜 콘텐츠처럼 다양한 곳에서 빠르게 공유될 수 있기 때문에 

국내 호스팅 업체에서 사용할 경우에 트래픽 문제가 지속적으로 발생할 수 있습니다.

가급적 트래픽을 무제한으로 제공하는 호스팅 업체 중에서 선택하시는 방법을 권장드리고 있고,

워드프레스 닷컴 호스팅은 저렴한 비용으로 무제한 트래픽을 이용할 수 있어 홈토리 에디터를 이용하는데

가장 좋은 호스팅으로 추천해 드리고 있는 점 참고해 주시기 바랍니다.

워드프레스 닷컴 호스팅

저렴한 요금제에 무제한 트래픽 이용 가능

저가 요금제에서는 FTP 접속 기능을 제공하지 않음

https://wordpress.com/

홈토리 에디터는 Iframe, 스크립트 2개의 공유 기능을 지원하고 있습니다.

Iframe 을 지원하는 홈페이지 및 쇼핑몰(아임웹)에서는 Iframe 소스코드를 이용하여 공유가 가능하고,

스크립트 삽입이 가능한 홈페이지 또는 쇼핑몰(카페24)에서는 Script 소스코드를 이용하여 공유가 가능합니다.

Iframe 과 스크립트 모두 지원하지 않는 네이버 블로그 및 오픈마켓 쇼핑몰(네이버 스마트 스토어,G마켓 등)에서는 공유가 불가합니다.

에디터 뷰어 마우스 우클릭 메뉴

- 소스코드 복사 [Iframe] : Iframe 소스코드 자동 복사

- 소스코드 복사 [Script] : Script 소스코드 자동 복사

※ 1개의 페이지에 여러개의 Script 샘플코드를 공유할 경우에는 공유 ID(hte-content-1-1772536286)의 뒷부분 숫자(1772536286)를 서로 다르게 설정해 주셔야 합니다.

스크립트 공유시 일부 이미지가 표시되지 않을 경우에는 아래 내용을 확인해 보시기 바랍니다.

1. 보안 인증서(SSL)

스크립트 공유를 사용하기 위해서는 호스팅 계정에 보안인증서(SSL)가 반드시 설치되어 있어야 하며 도메인 주소가 반드시 https로 시작해야 합니다.

보안인증서가 설치되어 있지 않은 환경에서는 스크립트 공유 기능을 사용하실 수 없습니다.

2. 이미지 접근 권한

에디터 설치시 에디터 업로드 폴더 경로(/wp-content/uploads/mangboard/hte)에 외부에서 이미지에 접근이 가능하도록 설정하는 설정파일(htaccess)이 자동으로 추가되어

에디터를 통해서 업로드한 이미지들은 외부 공유가 가능하도록 설정됩니다.

하지만 URL 주소를 통해 불러온 내부 이미지들은 기본적으로 외부에서 접근이 불가하기 때문에 접근이 가능하도록 설정하는 설정파일(htaccess)을 해당 이미지가 들어있는 폴더에 

추가해 주셔야 외부에서 공유가 가능합니다.

1) .htaccess  파일 설정방법

모든 사이트에 이미지 공유를 허용하는 ".htaccess" 파일 내용 ( htaccess.zip )

<ifModule mod_headers.c>
  <FilesMatch "\.(?i:mp4|webm|jpg|jpeg|png|gif|bmp)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule> 

특정 도메인 1개에만 이미지 공유를 허용하고자 할 경우 아래와 같이 도메인을 직접 입력하여 수정

<ifModule mod_headers.c>
  <FilesMatch "\.(?i:mp4|webm|jpg|jpeg|png|gif|bmp)$">
        Header set Access-Control-Allow-Origin "https://www.mangboard.com"
    </FilesMatch>
</IfModule> 

여러개의 도메인에 이미지 공유를 허용하고자 할 경우 아래와 같이 수정 (www.mangboard.com, demo.mangboard.com, www.mangboard.co.kr 도메인에 공유 허용)

<ifModule mod_headers.c>
    SetEnvIf Origin "^https?://(www\.mangboard\.com|demo\.mangboard\.com|www\.mangboard\.co\.kr)$" allowed_origin=$0
    <FilesMatch "\.(?i:mp4|webm|jpg|jpeg|png|gif|bmp)$">
        Header set Access-Control-Allow-Origin %{allowed_origin}e env=allowed_origin
        Header append Vary Origin
    </FilesMatch>
</IfModule> 

2) ".htaccess" 파일 업로드 위치 (최상위 폴더 또는 공유하고자 하는 이미지가 있는 폴더)

업로드 경로에 다른 .htaccess 파일이 존재할 경우에는 텍스트 편집기로 기존에 존재하는 .htaccess 파일을 열고 파일 내용 아랫부분에 내용 추가

최상위 폴더

망보드 데모 사이트 또는 외부 사이트에서 전체 소스 퍼가기 기능을 이용하여 에디터 내용을 추가한 경우 

에디터에 추가된 미디어 중에서 외부 사이트의 이미지 또는 동영상이 존재할 경우에는 CORS 보안 문제 때문에 공유기능이 활성화되지 않습니다.

공유기능을 활성화하시려면 에디터에 추가된 외부 이미지를 내부 이미지로 교체해 주셔야 하는데

외부 이미지를 선택하신 후 "마우스 우클릭 버튼 > 외부 이미지 가져오기" 메뉴를 클릭하시면 자동으로 외부 이미지를 호스팅에 저장한 후 내부 이미지 주소로 교체가 됩니다.

이러한 방식으로 외부 이미지 및 동영상을 모두 내부 주소로 교체해 주셔야 합니다.

여러개의 텍스트 박스에서 텍스트를 복사해서 가지고 오는 방식으로 텍스트를 설정할 경우 

각각의 텍스트 박스에 설정된 폰트 크기 및 여러가지 스타일이 그대로 유지된 상태로 복사되기 때문에

복사한 텍스트마다 스타일이 서로 다르게 설정되는 문제가 발생할 수 있습니다.

텍스트 박스에 설정된 내부 스타일을 초기화하기 위해서는 텍스트 박스를 선택한 상태에서 마우스 우클릭 버튼을 클릭한 후

"텍스트 스타일 초기화" 메뉴를 클릭해 주시면 텍스트 박스 내부에 설정된 스타일이 초기화되어 동일한 폰트 스타일을 적용하실 수 있습니다.

홈토리 에디터는 효과가 적용된 이미지 교체를 보다 쉽게 하기 위해 "효과 복사/붙여넣기" 기능을 제공하고 있습니다.

모션 효과 복사하는 방법

 - 모션 효과가 적용된 이미지를 선택한 상태에서 마우스 우클릭 버튼을 클릭한 후 "효과/모션 복사하기" 메뉴 클릭 

 - 모션 효과를 적용할 다른 이미지를 선택한 상태에서 마우스 우클릭 버튼을 클릭한 후 "효과/모션 붙여넣기" 메뉴 클릭

 홈토리 에디터는 마우스 우클릭 메뉴(컨텍스트)를 통해 편집에 도움을 줄 수 있는 다양한 기능들을 제공하고 있습니다.

홈토리 에디터 뷰어는 PC, TABLET, MOBILE  각각의 환경에서 서로 다른 콘텐츠를 표시할 수 있는 기능을 제공하고 있습니다.

설정가능한 옵션

  – tablet_pid : 태블릿에서 표시할 게시물 번호

[ hte_viewer_m1 name="e_hometory45" pid="1" tablet_pid="2" mobile_pid="3" align="center" ]

2) Iframe

<iframe src="https://demo.mangboard.com/?hte_iframe=e_hometory45&pid=1&align=center&tablet_pid=2&mobile_pid=3" width="100%" height="760" frameborder="0" marginheight="0" marginwidth="0" border="0" scrolling="no" allowfullscreen></iframe>

3) Script 

<div id="hte-content-1-1772954953"></div><script type="text/javascript" src="https://demo.mangboard.com/?hte_content=e_hometory45-1-1772954953&tablet_pid=2&mobile_pid=3" id="hte-content-js"></script>

홈토리 에디터는 현재 워드프레스+망보드(PHP) 버전만 제공하고 있지만

안정화 작업이 완료되면 외부 시스템에서 사용 가능한 버전(PHP, JSP)도 개발이 진행될 예정입니다.

외부 시스템에서 홈토리 에디터를 사용하기 위해 직접 개발해야 하는 내용

1. 에디터 내용 저장 및 수정

2. 에디터 라이브러리 및 템플릿 저장/불러오기/삭제

3. 에디터 뷰어 썸네일 네비게이션 이미지 저장

4. 에디터 뷰어 출력

5. 공유하기 기능

6. 외부 이미지 가져오기 기능 (외부 도메인의 이미지를 가져와서 호스팅에 저장 후 내부 도메인으로 교체)

홈토리 에디터는 망보드 옵션설정 기능을 통해 컬러 및 폰트를 추가할 수 있는 기능을 제공하고 있습니다.

워드프레스 관리자 > MangBoard > 옵션설정

에디터 폰트 추가

 - 망보드 옵션설정에 추가된 폰트는 에디터 편집화면에서 폰트 목록에 추가됩니다.

 - 옵션설정에서 추가한 폰트는 자동으로 설치가 되지 않기 때문에 별도의 방법으로 폰트를 추가 설치해 주셔야 합니다.

 - 웹폰트 설치: 홈페이지 모든 사용자가 폰트 설치없이 사용가능

   망보드 무료 웹폰트 플러그인: https://www.mangboard.com/store/?vid=188

 - 윈도우 폴더 폰트 설치: 폰트를 설치한 사용자만 추가된 폰트가 정상적으로 표시되고, 폰트가 없는 사용자는 다른 대체 폰트가 표시됨

컬러 프리셋

 - 망보드 옵션설정에 추가된 컬러 프리셋은 컬러 선택창에서 "COLOR PRESETS" 영역에 표시됩니다.

홈토리 에디터의 "페이지 로딩" 이벤트는 에디터 뷰어 영역이 브라우저 화면 영역에 표시되었을 경우를 의미합니다.

에디터 뷰어 영역이 페이지 하단에 있어 브라우저 화면 영역에 노출이 되지 않을 경우에는 대기 상태로 기다리다가

스크롤을 이동하여 에디터 뷰어 영역이 브라우저 화면 영역에서 조금이라도 노출이 되어야 "페이지 로딩" 이벤트가 발생합니다.

Iframe 또는 Script 공유 기능을 이용하여 외부 사이트에 에디터 뷰어를 공유했을 경우에도 동일한 방식으로 동작합니다.

모션 이동경로는 방식에 따라 "기본경로"와 "세밀한경로" 2가지 방식을 지원하고 있습니다.

기본경로: 꼭짓점을 중심으로 모션 이동

 - 꼭짓점을 중심으로 이동하기 때문에 Easing 효과 적용 가능

 - 꼭짓점을 중심으로 빠른 이동 가능

 - 첫번째 꼭짓점을 시작점으로 설정

세밀한경로: 꼭짓점 사이에 다수의 이동 포인트를 추가하여 포인트를 중심으로 모션 이동

 - 꼭짓점 사이에 세밀하게 추가된 포인트 좌표를 중심으로 이동하기 때문에 Easing 효과가 적용되지 않음

 - 1개의 포인트를 이동하는 최소 시간이 존재하기 때문에 이동 속도를 너무 빠르게 설정할 경우 설정한 속도보다 느리게 동작할 수 있음

 - 물체의 상단/중앙을 시작점으로 설정

예외사항: 꼭짓점이 없는 아이템(원형) 또는 이동 포인트를 가지고 있는 아이템(SVG)의 경우 기본경로를 설정해도 세밀한경로 방식으로 모션 이동

라운드가 적용된 사각형을 모션패스 대상으로 설정했을 경우 기본경로는 4개의 꼭짓점을 중심으로 이동하기 때문에 라운드 곡선을 무시하고 이동하지만 

세밀한경로의 경우 사각형 모서리의 라운드 영역에 포인트를 찍어서 이동하기 때문에 라운드를 따라 이동이 가능합니다.