Synap Editor Documentation
Page tree

Versions Compared

Old Version 1

changes.mady.by.user Kwon JongPyo

Saved on

compared with

New Version 2

changes.mady.by.user Kwon JongPyo

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

편집 API와 반응형보기 기능이 추가된 사이냅에디터 SynapEditor version 2.11.0 버전이 릴리즈 되었습니다has been released with advanced editing API and responsive view.

주요 개선사항

Table of Contents
maxLevel2
exclude\d.\d.\d[(\d. )]*
stylenone


...

1.

...

Advanced editing API

...

API를 이용한 문서 편집이 가능하도록 APIModel과 관련 API가 추가되었습니다.

APIModel에 대한 상세한 설명은 APIModel 도움말을 참고해주세요.

...

APIModel and editing API have been added to enable document editing using API.

For detailed description of APIModel, please refer to APIModel Help.

Model API

Children Display
depth3
styleh4
pageAPIModel
excerptTypesimple

...

Other editing API and improvements

API설명
insertHTML
파라메터에 ID가 존재할 경우 ID와 Offset에 해당하는 위치에 삽입됩니다.
ID가 존재하지 않을 경우 현재 Selection을 기준으로 다음 문단에 삽입됩니다

If id exists in the parameter, it is inserted into the specified id and offset. 
If id does not exists in the parameter, it is inserted into the next paragraph based on the current selection.

isDirty, clearDirty
편집된 내용이 있는지 판단하기 위한
isDirty()
메소드와 이를 초기화하는 clearDirty() 메소드가 추가되었습니다.getSelection에디터에서 selection 정보를 가져오는 API를 추가되었습니다. Selection 정보에서 문단, 셀, 표의 ID와 offset정보를 구할 수 있습니다
: Determines whether the content has been edited.
clearDirty() : Clears the dirty flag. When the dirty flag is initialized, the isDirty() function determines that there is no edited content.
getSelectionYou can get the id and offset information of paragraphs, cells, and tables from selection.
updateModel, updateBodyModel
HTML DOM을 수정하고 그 내용을 편집모델에 반영 후 다시 렌더링할 수 있는 API가 추가되었습니다
Apply the changed HTML DOM information to the editing model and re-render.
getAPIModels, getAPIModelById, getAPIModelsBySelector
현재
Get the APIModel using the current selection, id
, selector를 이용해서 편집용 APIModel을 가져오는 API가 추가되었습니다
and selector.
getContentsDocument
에디터 편집영역의 document를 반환하는 API가 추가되었습니다. 
Returns the document object of the editor editing area.
getHTMLElement, getHTMLElements
캐럿이 위치한곳의
Returns the HTML Element
가져오기오는 API가 추가되었습니다
where the caret is positioned.
getTableCellHTMLElement
캐럿이 위치한 표에서 셀
Returns the HTML Element of the cell (TD
또는
or TH)
의 HTML Element를 가져오는 API가 추가되었습니다
in the table where the caret is positioned.


2.

...

 Menu and Toolbar Toggle API

Added API for menu and toolbar toggle.

API설명

getUIManager().showMenu();

getUIManager().hideMenu();

메뉴를 보이거나 감춥니다Show or hide the menu.

Code Block
languagejs
titleExample
editor.getUIManager().showMenu();
editor.getUIManager().hideMenu();


getUIManager().showToolbar(index);

getUIManager().hideToolbar(index);

툴바를 라인단위로 보이거나 감춥니다.

index값이 0인 경우 첫번째 툴바 라인이 보이거나 감춰집니다Shows or hides the toolbar by line.

If the index value is 0, the first toolbar line is shown or hidden.

Code Block
languagejs
titleExample
editor.getUIManager().showToolbar(0);
editor.getUIManager().hideToolbar(1);


3.

...

 Responsive view

Added Responsive View feature. You can change the editing mode to mobile phone or tablet.

또한 환경설정파일에 아래 옵션을 추가하면 표, 이미지, 동영상에 "반응형" 속성을 설정 할 수 있습니다

You can set "Responsive" properties for table, image, and video by adding the options below to your config file.

Code Block
languagejs
/**
  * Whether 반응형to 편집을use 사용할지responsive 여부입니다.editing (기본값default false)
  * true로 설정하게 되면 이미지/비디오 속성에서 반응형 여부를 체크할 수 있게됩니다 If set to true, it is possible to check whether the image/video property is responsive or not.
  */
 'editor.responsive.use': true,


반응형 속성이 설정된 표, 이미지, 동영상은 아래와 같이 동작합니다.

  • 표 : 표의 너비는 px로 고정되고 모바일에서는 좌/우 스크롤 됩니다.
  • 이미지, 동영상 : 이미지, 동영상에 max-width 스타일이 추가됩니다. 화면의 너비에 따라 이미지, 동영상의 너비가 변경됩니다.

>> 반응형 보기 데모

4. 표 고정너비 삽입

...


Tables, images, and videos with responsive properties set behave as follows.

  • Table : The width of the table is fixed in px and scrolls left/right on mobile.
  • Image, Video : The max-width style is added to images and videos. The width of images and videos changes according to the width of the screen.


>> Responsive View Demo

4. Insert table fixed width

Added setting to insert table in fixed width (px). Add the 'editor.table.defaultWidthUnit.px' value to the configuration file as shown below.

Code Block
languagejs
/**
  * 표 삽입시 px형태로 삽입할지를 설정합니다 Set whether to insert a table with a fixed width.
  * 값이 false일 경우 표의 너비가 "%"로 삽입됩니다If the value is true, the table is inserted with a fixed width (px).
  */
 'editor.table.defaultWidthUnit.px': true,

5.

...

 Table/cell balloon popup exposure option added

Added option to show table and cell balloon popup only when cell is selected. See below for single cell selection.

Code Block
languagejs
 /**
  * 표 풍선팝업을 tableCellSelection일 경우에만 보여줄지 여부를 설정합니다 Set whether to show table balloon popup only in case of table or cell selection.
  * 값이 false일 경우 표 안쪽 캐럿 상태일 경우에도 표 풍선팝업이 노출됩니다If this value is false, the table balloon popup is shown even when the caret state is inside the table.
  */
 'editor.table.showBalloon.onlyTableCellSelection': true,

6.

...

 Added single cell selection

The UX has been improved so that you can select a single cell using the mouse.

7.

...

 Improved caption position when rotating image

When rotating the image, the position on the caption is automatically adjusted so that the rotated image does not cover the caption.