도형 멀티셀렉션, Iframe mode, Document mode가 추가된 사이냅에디터 Synap Editor version 2.10.0 버전이 릴리즈 되었습니다.
그 외에도 표 절대좌표 지원, 도형 텍스트 정렬기능 등 많은 기능이 개선되었습니다.
...
has been released with the addition of shape multi-selection, iframe mode, and Document mode.
In addition, many functions such as support for absolute coordinates in tables, figure text alignment, etc. have been improved.
Major Improvements
Table of Contents maxLevel 2 exclude \d.\d.\d[(\d. )]* style none
...
Notice
사이냅에디터 Starting with Synap Editor version 2.8.0 버전부터 에디터 스크립트 파일을 경량화하고자 임포트 기능과 도형 관련 기능을 외부 모듈로 분리하였습니다.
기존과 동일하게 임포트 기능과 도형 관련 기능을 사용하시려면 아래의 파일들을 추가로 include 하셔야 합니다.
문서 임포트 기능 사용 (SEDocModelParser)
xlsx, docx, hwp 등의 문서를 임포트 하는 기능을 사용하기 위해서는 에디터 패키지 externals 폴더 아래에 포함된 SEDocModelParser 모듈을 include 합니다, the import function and shape-related functions have been separated into external modules to lighten the editor script file.
To use the import function and shape-related functions as before, the following files should be additionally included.
Using the document import function (SEDocModelParser)
To use the function of importing documents such as xlsx, docx, hwp, etc., include the SEDocModelParser module included under the editor package externals folder.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script src="externals/SEDocModelParser/SEDocModelParser.min.js"></script> |
...
Using shape-related functions (SEShapeManager)
도형이 포함된 문서를 임포트 하거나, shapeEditor 플러그인의 기능을 사용하기 위해서는 에디터 패키지 externals 폴더 아래에 포함된 SEShapeManager 모듈을 include 합니다To import documents containing shapes or use the functions of the shapeEditor plugin, include the SEShapeManager module included under the editor package externals folder.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script src="externals/SEShapeManager/SEShapeManager.min.js"></script> |
1.
...
Shift 키를 이용한 도형 멀티셀렉션
Shift 키를 누른 채로 도형을 선택하면 멀티셀렉션이 가능하며 멀티셀렉션 상태에서는 속성 버튼이 disable 됩니다.
마우스 Drag를 이용한 멀티셀렉션을 제공하기 위해 "선택 모드"가 추가되었습니다.
...
Shape multi-selection
Shape multi-selection with the Shift key
If you select a shape while holding down the Shift key, multi-selection is activated.
In the multi-selection status, the property button is disabled.
"Selection Mode" has been added to provide multi-selection using mouse drag.
The function is activated by adding "selectionMode" to the toolbar settings of the config file as shown below.
| Code Block | ||
|---|---|---|
| ||
'editor.toolbar': [
...,
'selectionMode', 'shapeEditor'
...
], |
2.
...
iframe mode
...
config 파일에 아래와 같은 설정을 추가하면 iframe mode를 사용할 수 있습니다.
iframe mode를 설정하면 편집 영역이 iframe 안쪽에 생성되어 외부 스타일의 영향을 최소화할 수 있습니다.
...
support
You can use iframe mode by adding the following settings to the config file.
If you set the iframe mode, the editing area will be created inside the iframe to minimize the influence of external styles.
User UX has not changed at all.
| Code Block | ||||
|---|---|---|---|---|
| ||||
'editor.mode.iframe': {
'enable': true,
'style.urls': ['../dist/iframeMode/contentsEditStyle.css', ... ],
'script.urls': ['../dist/iframeMode/SEPolyfill.js']
} |
주의) Iframe mode 사용 시 에디터가 완전히 초기화된 후 에디터 API를 사용하셔야 합니다.
...
Note: When using Iframe mode, you should use the editor API after the editor is completely initialized.
For more details on using Iframe mode, refer to [Installation and Settings> Configuration > Basic UI Setting > Iframe mode]
...
.
3.
...
Document mode
...
config 파일에 아래와 같은 설정을 추가하면 document mode를 사용할 수 있습니다.
support
You can use the document mode by adding the following settings to the config file.
The 'editor.document.size' 값은 별도로 설정하지 않으면 아래와 같은 기본값을 가지게 됩니다. 기본 설정값은 MS-Word의 A4 크기와 유사합니다value will have the following default unless otherwise specified. The default is similar to the A4 size of MS-Word.
| Code Block | ||||
|---|---|---|---|---|
| ||||
'editor.type': 'document',
'editor.document.size': {
'width': 793,
'height': 1122,
'padding': { 'top': 96, 'right': 96, 'bottom': 96, 'left': 96 }
}, |
Document mode 사용에 대한 자세한 사항은 [설치 및 설정 > 환경설정 > 기본 UI 설정 > Document mode]를 참고해주세요.
4. 표 절대좌표 지원
표 속성에 "글자처럼 취급" 기능이 추가되었습니다.
"글자처럼 취급"을 해제하면 표 이동 핸들을 이용해서 표를 자유롭게 이동할 수 있습니다For more details on using document mode, refer to [Installation and Settings> Configuration > Basic UI Settings > Document Mode].
4. Absolute coordinate support for tables
The ‘Treat like text’ function has been added to table properties.
If you turn off "Treat like text," you can freely move in the table with the table movement handle.
5.
...
Adding key shape icons to the toolbar
A function that allows you to place frequently used shapes on the toolbar has been added.
In the toolbar of the config file, you can add desired shapes in the form of "shapeEditor_shape name" as shown below.
| Code Block | ||||
|---|---|---|---|---|
| ||||
'editor.toolbar': [
'shapeEditor', 'shapeEditor_textBox','shapeEditor_rectangle','shapeEditor_roundedRectangle','shapeEditor_oval'
], |
[적용결과Results of application]
추가 가능한 도형의 종류
...
Types of shapes that can be added
You can check the types and names of the shapes that can be added in [Plug-in> Shape Editor].
6.
...
Adding text alignment function to shape
A function to align text inside shapes has been added.
7.
...
Adding "Greek and Coptic" to special symbols
"Greek and Coptic" have been added to the special symbols.
8.
...
Improvement of Copy / Paste
The pasting quality for contents copied from MS-Word , and MS-Excel 문서에서 복사한 내용에 대한 붙여넣기 품질이 개선되었습니다.다만 documents has been improved.
However, if you paste contents copied from MS-Office , HWP 문서에서 복사한 내용을 에디터에 붙여 넣을 경우 OS, 해당 애플리케이션, 브라우저 등 구조적으로 많은 제약사항이 있습니다.
문서를 조금 더 원본에 가까운 형태로 불러오려면 "임포트" 기능을 이용해 주세요or HWP documents into the editor, there may be many structural limitations arising from the OS, applications, and the browser.
If you want to import the document in a form more similar to the original, please use the "Import" function.