편집 API와 반응형보기 기능이 추가된 사이냅에디터 SynapEditor version 2.11.0 버전이 릴리즈 되었습니다.
...
has been released with advanced editing API and responsive view.
Major Improvements
Table of Contents maxLevel 2 exclude \d.\d.\d[(\d. )]* style none
...
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 | ||||||||
---|---|---|---|---|---|---|---|---|
|
...
Other editing API and improvements
API | 설명 |
---|---|
insertHTML |
ID가 존재하지 않을 경우 현재 Selection을 기준으로 다음 문단에 삽입됩니다
If id exists in the parameter, it is inserted into the specified id and offset. |
isDirty, clearDirty |
isDirty() |
: 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. | |
getSelection | You can get the id and offset information of paragraphs, cells, and tables from selection. |
updateModel, updateBodyModel |
Apply the changed HTML DOM information to the editing model and re-render. |
getAPIModels, getAPIModelById, getAPIModelsBySelector |
Get the APIModel using the current selection, id |
and selector. |
getContentsDocument |
Returns the document object of the editor editing area. |
getHTMLElement, getHTMLElements |
Returns the HTML Element |
where the caret is positioned. |
getTableCellHTMLElement |
Returns the HTML Element of the cell (TD |
or TH) |
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.
| |||||||
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.
|
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 | ||
---|---|---|
| ||
/** * 반응형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.
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 | ||
---|---|---|
| ||
/** * 표 삽입시 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 | ||
---|---|---|
| ||
/** * 표 풍선팝업을 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.
...
마우스를 이용해서 단일 셀을 선택할 수 있도록 UX가 개선되었습니다.
7. 이미지회전시 캡션 위치 조절
이미지 회전시에 회전된 이미지가 캡션을 가리지 않도록 캡션위 위치를 자동으로 조정합니다.
...
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.