TutuEdit · 임베드 위젯

코드 한 줄로,몇 초 만에 사이트에 이미지 편집기를 추가하세요

TutuEdit의 프로 편집기(자르기 / 필터 / 누끼 / 텍스트)를 어떤 웹사이트에든 임베드하세요. 방문자는 사이트 안에서 바로 사진을 편집할 수 있습니다. 테마와 도구를 설정할 수 있고, 제품 업데이트는 자동으로 반영되어 유지 관리가 전혀 필요 없습니다.

라이브로 체험 임베드 코드 보기 키 생성 (심사 없음)

복사해서 바로 사용 · 사이트의 </body> 앞에 붙여넣으세요

<script src="https://tutuedit.com/embed.js"
        data-key="pk_live_YOUR_KEY"
        data-mount="#dd-editor" defer></script>

pk_live_YOUR_KEY 를, 콘솔 에서 직접 생성한 공개 키로 바꾸세요 (등록 사용자라면 누구나 — 심사 없이 즉시 적용). 컨테이너 #dd-editor 에는 너비와 높이가 필요합니다. 임베드할 때 임베드 URL을 등록하세요 (허용 목록. 로컬 개발에는 localhost사용). 등록한 사이트에서만 표시됩니다.

라이브로 체험

아래 버튼을 눌러 이 페이지에서 임베드된 이미지 편집기를 바로 체험해 보세요.

JS API (콜백 / 커스터마이즈용)

<script src="https://tutuedit.com/embed.js"></script>
<script>
  const dd = TutuEdit.mount('#dd-editor', {
    key: 'pk_live_YOUR_KEY',
    theme: 'auto',            // auto | light | dark
    onSave: (file) => {
      // file.dataUrl = 편집된 이미지 (base64)
      upload(file.dataUrl);
    }
  });
  dd.open('https://your.site/photo.jpg'); // 이미지 열기
</script>

전체 설정

매개변수	타입	설명
key	string	당신의 pk_ 공개 키 (콘솔에서 생성). 필수.
theme	'auto'\|'light'\|'dark'	테마. auto는 호스트/시스템의 라이트·다크 모드를 따릅니다.
hideToolbar	boolean	왼쪽 도구 모음 숨기기 (미니멀 보기 / 원탭 내보내기 시나리오).
hideHeader	boolean	상단 바 숨기기 (자체 UI를 만들고 export()로 내보낼 때).
hideOpen	boolean	“이미지 열기” 버튼 숨기기 (dd.open을 통한 이미지만 허용).
hideExport	boolean	“내보내기 다운로드” 버튼 숨기기 (“완료 후 반환”만 사용).
saveText	string	“완료” 버튼 문구 (기본값 “완료 후 반환”, 16자 이하).
exportFormat	'png'\|'jpg'\|'webp'	완료 시 내보내기 형식.
exportQuality	number 0..1	JPG/WebP 품질.

메서드

dd.open(url, name?)편집기에서 이미지 열기 (url 또는 dataURL).
dd.export(format?, quality?)현재 결과 내보내기 → Promise<{dataUrl,mime,size}>.
dd.setTheme('dark')런타임에 테마 전환.
dd.destroy()위젯 언마운트 (iframe 제거).

이벤트 콜백

onReady()편집기 준비 완료.
onSave(file)사용자가 “완료”를 누름 → file.dataUrl이 편집 결과.
onError(e)e.message는 사람이 읽을 수 있습니다 (비활성화 / 권한 없음 / 로드 실패).
onClose()전체 화면 오버레이가 닫혔습니다.

보안 · 자동 업데이트

· 셀프서비스, 자동 승인: 등록 사용자가 콘솔에서 사이트 이름 + 임베드 URL을 등록하면 키를 받을 수 있고, 즉시 적용됩니다.
· 공개 키는 공개되어 있지만, 등록 URL 허용/차단 목록으로 오용을 방지합니다(차단 목록 우선). 등록되지 않은 도메인의 요청은 거부되며 등록을 안내합니다. 언제든지 켜고 끌 수 있습니다.
· 실제 출처 통계: 로드할 때마다 Origin별로 집계되며(차단된 것도 포함), 콘솔에서 출처별 내역을 볼 수 있고, 등록되지 않은 도메인은 원탭으로 허용 목록에 추가할 수 있습니다.
· 편집기는 TutuEdit 자체 도메인에서 실행됩니다(격리). 당신의 페이지는 어떤 TutuEdit 자격 증명에도 접근할 수 없으며, 방문자의 비공개 TutuEdit 작품이 위젯에 나타나지도 않습니다.
· 위젯은 TutuEdit가 셀프호스팅하고 자동 업데이트합니다. 기능 업그레이드에 당신 쪽 코드 변경은 필요 없으며, 유지 관리가 전혀 없습니다.