- HTML5 Canvas 기술을 이용한 위지윅(WYSIWYG) 방식의 콘텐츠 편집 에디터로 다양한 편집 기능 제공

- 각각의 아이템 정보를 객체 기반으로 저장하여 수정 및 모션 설정 가능

- 워드프레스를 기반으로 제작된 환경에서 설치 및 사용 가능


※ 온라인 이미지 편집 에디터로 개발이 진행되다가 "홈토리 에디터4" 버전부터 모션 편집 기능이 추가됨

1. 도형 그리기 기능
  - 삼각형, 사각형, 폴리곤(Polygon), 화살표 등 다양한 도형 그리기 기능
  - 실선, 점선, 파선, 긴파선, 일점쇄선, 이점쇄선 등 다양한 선그리기 기능
2. 이미지 크롭기능
  - 자르기 아이콘을 클릭하고 원하는 영역을 드래그하여 드래그한 영역을 새로운 이미지로 생성
  - 에디터에서 삽입된 이미지 선택 후 상,하,좌,우 이미지 자르기 기능
3. 이미지 라이브러리 및 템플릿 기능
  - 자주 사용하는 이미지는 이미지 라이브러리에 등록해서 사용 가능
  - 자주 사용하는 템플릿은 드래그를 이용하여 그룹으로 선택 후 템플릿으로 등록해서 사용 가능
4. 슬라이드 및 페이지 기능
  - 에디터 하단 중앙에 페이지 네비게이션 기능을 이용하여 여러 페이지 생성 가능
  - 여러 페이지 형태로 생성한 콘텐츠를 슬라이드 및 페이지 형태로 출력 가능
5. PDF 파일 자동 등록 기능
  - PDF 파일에 있는 페이지들을 이미지로 변환하여 각각의 페이지에 이미지 자동 등록
  - PDF 파일을 업로드하여 슬라이드 형태로 사용 가능
6. 슬라이드 네비게이션 기능
  - 여러 페이지 형태로 생성한 슬라이드에 불릿,화살표,탭메뉴,썸네일 네비게이션 설정 가능
7. 모션 이벤트 효과
  - 마우스 이벤트(업/다운/오버아웃), 페이지 로딩, 아이템(물체) 접촉 등 다양한 모션 이벤트 효과 설정 가능
  - 아이템에 모션 패스 설정 가능 (원형, 사각형, 폴리라인, SVG 등)
  - 아이템마다 최대 9개 모션 이벤트 설정 가능
  - 동영상(mp4) 재생 위치 모션 설정 기능
8. 망보드 및 워드프레스에 업로드된 이미지를 편집 이미지로 연결해서 수정 가능 (원본 이미지 수정 기능은 관리자 모드에서만 사용 가능)
  - 이미지 관리 게시판에서 업로드된 모든 이미지 편집 가능
9. 공유기능
  - Iframe 및 스크립트 2가지 방식의 공유 기능 제공
  - 캔버스 우클릭 버튼을 클릭하여 공유 스크립트 복사 가능
BASIC (구매형) PLUS (구매형) PRO (구매형)
사용용도 이미지 편집 이미지 + 모션 편집 이미지 + 모션 편집
도형 그리기 기능 O O O
이미지 편집 기능 O O O
네비게이션 기능
(불릿,화살표,탭메뉴)
O O O
모션 편집 기능 X O O
템플릿 기능 X X O
다국어 지원 영어,중국어,일어 영어,중국어,일어 영어,중국어,일어
설치환경
워드프레스 6.0 이상 + 망보드 2.4.3 이상 (PHP 7.3 이상, MySQL/MariaDB)
(자체 호스팅에 설치해서 사용하는 독립형 시스템, 에디터 소스 수정 가능)
구입하기
구입하기
구입하기
1. 홈토리 에디터를 설치하기 위해서는 먼저 워드프레스와 망보드가 설치되어 있어야 합니다. .
  - 워드프레스 설치방법: https://www.mangboard.com/lecture/?vid=1
  - 망보드 설치방법: https://www.mangboard.com/lecture/?vid=2

2. 망보드가 설치되어 있는 워드프레스 관리자 페이지에 접속한 후 MangBoard > STORE 메뉴를 클릭합니다.
  - 워드프레스 관리자 페이지 URL: https://홈페이지/wp-admin/

3. 홈토리 에디터 상품에 마우스를 오버한 후 설치하기 버튼을 클릭하시면 설치작업이 자동으로 진행됩니다.


4. 에디터 설치가 완료되면 왼쪽 관리자 메뉴에 "Hometory Editor" 메뉴가 추가되고 바로 사용이 가능합니다.

  1) 게시물 관리: 홈토리 에디터가 적용된 기본 게시판 (초보 사용자분들을 위해 홈토리 에디터가 적용된 기본 게시판 추가, 여러개의 게시판을 추가해서 적용 가능)
  2) 편집 이미지 관리: 망보드 및 워드프레스에 업로드된 이미지를 편집 및 복구할 수 있도록 수정된 내용들을 저장해서 관리
    - 망보드 이미지 편집모드: 워드프레스 관리자 > MangBoard > 파일관리 > 파일 목록에서 이미지 클릭시 편집 모드로 이동
    - 워드프레스 이미지 편집모드: 워드프레스 관리자 > 미디어 > 라이브러리 > 편집 이미지 클릭 > "Edit Image using HOMETORY" 버튼 클릭시 편집 모드로 이동
  3) 템플릿 관리: 홈토리 에디터를 통해 저장된 템플릿 관리 (레벨에 따라 접근 가능한 템플릿 설정 가능)
  4) 라이브러리 관리: 홈토리 에디터를 통해 저장된 라이브러리 관리 (레벨에 따라 접근 가능한 라이브러리 설정 가능)

※ [설치하기] 버튼이 표시되지 않을 경우 확인사항
상품 구입시 입력한 도메인 주소가 사이트 주소와 일치하지 않을 경우 [설치하기] 버튼이 표시되지 않을 수 있는데,
도메인 주소를 잘 못 입력하셨을 경우 "주문/결제내역" 페이지에서 주문하신 상품의 상세보기 버튼을 클릭하여 상세보기 페이지로 이동하시면 도메인 주소를 변경하실 수 있습니다.
  - 주문/결제내역: https://www.mangboard.com/m_my_order/
1. 망보드가 설치되어 있는 워드프레스 관리자 페이지에 접속한 후 MangBoard > 게시판 관리 메뉴를 클릭합니다.


2. 게시판 관리 페이지 우측하단에 "게시판 추가" 버튼을 클릭해서 게시판 추가화면으로 이동합니다.


3. 게시판 이름을 입력한 후 에디터 설정 항목에서 "Hometory Editor"을 선택한 후 페이지 우측 하단에 "확인" 버튼을 클릭하여 게시판을 추가합니다.


4. 추가된 게시판 목록에서 [mb_board name="board1" style=""] Shortcode를 복사합니다.


5. 관리자 메뉴에서 페이지>새 페이지 추가 메뉴를 클릭해서 새 페이지 추가 화면으로 이동합니다.
에디터에 게시판 Shortcode를 붙여 넣고, 공개하기 버튼을 클릭해서 망보드 게시판과 페이지를 연결합니다.


6. 관리자 메뉴에서 모양 > 메뉴 메뉴를 클릭해 메뉴 편집 화면으로 이동합니다.
새로 추가한 "홈토리 에디터" 페이지를 선택하고 메뉴 추가 버튼을 클릭한 후 메뉴 저장 버튼을 클릭합니다

1. 모션 콘텐츠에서 마우스 우클릭 버튼을 클릭한 후 "소스코드 복사[Script]" 메뉴를 클릭합니다.

홈토리에디터_공유1.jpg


2. 망보드 게시판 글쓰기 에디터 하단에 있는 동영상 버튼을 클릭한 후 복사된 소스코드를 붙여넣고 "확인" 버튼을 클릭합니다.

3. 게시물 제목을 입력한 후 페이지 우측 하단에 "확인" 버튼을 클릭하여 게시물을 등록한 후 글보기 페이지에서 모션 콘텐츠가 정상적으로 동작하는지 확인합니다.