시작하기 | 워드프레스 플러그인 망보드 매뉴얼

홈토리 에디터는 제작된 콘텐츠를 보다 쉽게 다양한 사이트에 공유하기 위해 Iframe 과 Script 2가지 공유 기능을 지원하고 있습니다.

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

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

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

소스코드 복사방법

제작된 콘텐츠에서 마우스 우클릭 버튼 클릭

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

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

Iframe 공유

Iframe 소스코드를 이용하여 제작된 콘텐츠를 공유
웹폰트 사용시 콘텐츠가 있는 홈페이지에만 웹폰트 설치 필요

소스코드 샘플:

Script 공유

Script 소스코드를 이용하여 제작된 콘텐츠를 공유
웹페이지에 Script 소스코드를 삽입할 수 있는 권한 필요
콘텐츠가 있는 호스팅 계정에 보안인증서(SSL)가 설치되어 있어서 홈페이지 주소가 https로 시작해야 공유 가능
jQuery 라이브러리를 지원하지 않는 환경에서는 jQuery 라이브러리 추가 필요 (jQuery 1.9 버전 이상 필요)
웹폰트 사용시 공유 스크립트 상단에 웹폰트 설치 코드 추가 필요

소스코드 샘플1 (기본):

소스코드 샘플2 (jQuery):

jQuery 를 지원하지 않는 홈페이지에서는 아래와 같이 jQuery 추가 코드를 홈페이지 헤더 또는 스크립트 코드 앞에 추가 (jQuery 1.9 버전 이상 필요)

소스코드 샘플3 (웹폰트):

나눔고딕(Nanum Gothic) 웹폰트 사용시 웹폰트 설치 코드를 스크립트 코드 앞에 추가

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

이미지 접근 권한 설정

홈토리 에디터 설치시 에디터 업로드 폴더 경로(/wp-content/uploads/mangboard/hte)에 외부에서 이미지에 접근이 가능하도록 설정하는

설정파일(.htaccess)이 자동으로 추가되어 에디터를 통해서 업로드한 이미지들은 외부 공유가 가능하도록 설정됩니다.

에디터를 통해 업로드된 이미지가 아닐 경우에는 콘텐츠가 공유된 외부 사이트에서 이미지 접근이 불가하기 때문에 설정파일(.htaccess)을 이미지가 들어있는 폴더에 추가해 주셔야 외부에서 공유가 가능합니다.

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

<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>

이미지 공유 중단하기

홈토리 에디터 설치시 자동으로 생성된 설정파일은 "워드프레스 관리자 > MangBoard > 이미지 공유" 옵션 항목을 "사용안함"으로 설정하시면

외부에서 이미지 공유가 안되도록 설정파일(htaccess)이 삭제되어 이미지 공유가 중단됩니다.

"이미지 공유" 옵션 항목을 다시 "사용"으로 설정하시면 설정파일(htaccess)이 다시 생성되어 이미지 공유가 가능합니다.

이미지 공유 설정

외부 이미지 저장하기

홈토리 에디터는 이미지 불러오기 기능을 이용하여 외부 사이트에 있는 이미지를 불러올 경우 내부에 이미지를 저장한 후 불러오도록 설정되어 있지만

소스코드 퍼가기 기능을 통해 외부 이미지를 불러올 경우에는 보안문제 때문에 공유 및 일부 기능(캡쳐)이 정상적으로 동작하지 않을 수 있어서 내부 이미지로 교체하신 후 사용해 주셔야 합니다.

홈토리 에디터는 외부 이미지를 내부 이미지로 저장하는 기능을 제공하고 있어서 외부 이미지를 선택하신 후 "마우스 우클릭 버튼 > 외부 이미지 가져오기" 메뉴를 클릭하시면 자동으로 외부 이미지를 호스팅에 저장한 후 내부 이미지 주소로 교체가 됩니다.

외부 이미지 가져오기

주의사항

에디터에 추가된 미디어 중에서 외부 사이트의 이미지 또는 동영상이 존재할 경우에는 CORS 보안 문제 때문에 공유기능이 활성화되지 않습니다.
홈토리 에디터를 통해 업로드된 이미지가 아닐 경우 외부 사이트에서 해당 이미지에 접근권한이 없어 이미지가 표시되지 않을 수 있습니다.
외부 사이트에 있는 이미지를 사용할 경우 보안문제 때문에 공유 및 일부 기능이 정상적으로 동작하지 않을 수 있기 때문에 가급적 내부 이미지로 저장해서 사용해 주셔야 합니다.