TnView · Preview · VDP

TnView — 썸네일 뷰어

TnView는 편집기에서 저장한 프로젝트의 썸네일을 보여주는 경량 모드입니다. 불필요한 UI 없이 썸네일만 표시하며, VDP 가변 데이터를 주입해 동적으로 갱신할 수 있습니다.

open_tnview

editor.open_tnview(params, callback);

이름	타입	기본값	설명
`parent_element` *	`HTMLElement`	—	편집기 iframe이 추가될 DOM node
`token` *	`string`	—	서버를 통해 받은 access key
`prjid` *	`string`	—	프로젝트 id
`npage`	`number`	`1`	한 화면에 보여줄 페이지 수
`flow`	`string`	`horizontal`	페이지 배치 방향

editor.open_tnview(
    { parent_element, prjid, token, npage: 2 },
    function (err, data) { console.log(err, data); }
);

페이지 이동

editor.post_to_tnview('move-page', { direction: 'next' }); // 'prev' | 'next'
editor.move_page_tnview('next');

가변 데이터 주입 — set_variable_data_row

TnView에 한 print에 해당하는 가변 데이터를 주입하면 썸네일이 갱신됩니다.

editor.set_variable_data_row(varDataRow);

let varDataSet = {
    rows: [
        { cols: [
            { id: 'name', value: { text: '전 지 현' }, shrink: true },
            { id: 'title-role', value: { text: '최강미모' } },
        ] },
        { cols: [
            { id: 'name', value: { text: '송 혜 교' } },
            { id: 'title-role', value: { text: '절대지존' } },
        ] },
    ],
};
editor.set_variable_data_row(varDataSet.rows[index]);

가변 데이터 타입 (TypeScript)

interface VariableDataSet { rows: VariableDataRow[]; }       // 전체 테이블
interface VariableDataRow { cols: VariableData[]; }          // print 1개분
interface VariableData { id: string; value: { text: string }; }

Preview — 미리보기

저장된 프로젝트를 미리보기 모드로 띄웁니다.

open_preview

editor.open_preview(params, callback);

이름	타입	기본값	설명
`parent_element` *	`HTMLElement`	—	편집기 iframe이 추가될 DOM node
`partner`	`string`	—	파트너 코드
`uid`	`string`	—	user id
`prjid` *	`string`	—	프로젝트 id
`npage`	`number`	`1`	한 화면에 보여줄 페이지 수(숫자 또는 `auto`)
`flow`	`string`	`horizontal`	horizontal / vertical / grid:{size} (예: `grid:312`)

브라우저 back 버튼 클릭 시 콜백 data는 { type: 'from-edicus-preview', action: 'close' }로 호출됩니다.

editor.open_preview(
    { parent_element, prjid, partner: 'motion1', uid: '1234567', npage: 2 },
    function (err, data) {
        if (data.type == 'from-edicus-preview' && data.action == 'close') {
            editor.destroy({ parent_element: this.parent_preview_element });
        }
    }
);

Preview 페이지 이동

editor.post_to_preview('move-page', { direction: 'prev' });
editor.post_to_preview('move-page', { direction: 'next' });