DIY 에디터 API 소개
DIY 에디터 소개 바로가기
DIY 에디터 바로가기
DIY 에디터는 웹페이지 제작을 위한 웹 코드 편집기 입니다. 일반적인 웹페이지 제작 방식과 거의 동일하지만 별도의 서버 연결 없이 웹 브라우저의 인스턴스 환경에서 동작한다는 특성 때문에 몇 가지 사용에 대한 제한 사항과 특별한 기능을 제공합니다.
제한 사항
1. 스크립트에서 상대적 경로를 사용하는 경우
DIY 에디터는 웹 서버 없이 동작하는 특성 때문에 html 파일 실행 시 프로젝트에 포함되어 있는 파일을 참조할 때 파일의 상대 경로 URL 로 접근할 수 없습니다.
HTML 파일의 src나 href, CSS 파일의 url()문법으로 상대적 경로의 다른 파일들을 참조하는 경우 HTML 런처에서 파일들의 메모리 상 주소인 blob URL 형태로 치환합니다.
자바스크립트는 매우 큰 사용 범위 때문에 HTML 런처가 상대적 경로를 예측하고 처리하기에는 어려움이 있습니다. 따라서 자바스크립트에서 상대적 경로 참조를 사용할 때는 DIY 에디터만의 특별한 API를 사용해야 합니다.
DIY 에디터에서 자바스크립로 상대적 경로를 사용하는 경우 url('경로') 함수를 사용해야 합니다. 해당 함수는 DIY 에디터의 내장 함수로 HTML 런처로 실행 시 상대적 경로를 메모리 상 주소인 blob URL 형태로 변환합니다.
const img = document.createElement('img');
document.body.append(img);
//일반적인 상대적 경로 참조법
img.src = 'logo.png';
//DIY 에디터용 사용법
img.src = url('logo.png');
만약 DIY 에디터에서 작성한 프로젝트를 별도의 웹 서버에 배포하는 경우 url()문법을 위한 호환 코드는 다음과 같습니다. 아래 코드를 HTML 파일의 다른 스크립트들 보다 먼저 실행 될 수 있도록 추가하여 주세요.
window.url = function url(src) {
return src
}
DIY 에디터 추가 기능
DIY 에디터는 단순 웹페이지 제작 뿐만 아니라 게임 제작 등 툴 프로그램의 역할을 위한 사용도 지향합니다. 이를 위해 DIY 에디터는 프로젝트 내의 파일 입출력 기능과 에디터 커스텀 인터페이스 추가를 위한 기능을 제공 합니다.
1. 파일 입출력
node.js 의 fs 와 유사한 API로 DIY 에디터의 메모리 기반 가상 파일 시스템의 파일 입출력을 할 수 있습니다.
지원하는 기능은 다음과 같습니다.
fs.writeFile: (path: string, content: string)=>void;
fs.readFile: (path: string)=>File;
fs.readFileToText: (path: string)=>Promise<string>;
fs.unlink: (path: string)=>void;
fs.readdir: (path: string)=>string[];
fs.mkdir: (path: string)=>void;
fs.rmdir: (path: string)=>void;
fs.exists: (path: string)=>boolean;
fs.isDir: (path: string)=>boolean;2. 상단 메뉴 추가
자바스크립트로 상단의 메뉴를 추가합니다.
globalVariable.topMenuManager.addMenu(name: string, {
text: string;
onClick: ()=>void;
disabled?: boolean;
divider?: boolean;
}[]): number
globalVariable.topMenuManager.removeMenu(id: number): void상단 메뉴를 추가하는 자바스크립트는 HTML 런처를 통해 실행되어야
3. 콘텍스트 메뉴 커스텀
미리보기 화면 내에서 마우스 오른쪽 버튼 클릭 시 나오는 콘텍스트 메뉴를 자바스크립트로 커스텀 합니다.
globalVariable.contextMenuManager.menu({
text: string;
onClick: ()=>void;
shortcut?: string;
divider?: boolean;
}[]): void