도형 멀티셀렉션, iframe mode, document mode 가 추가된 사이냅에디터 2.10.0 버전이 릴리즈 되었습니다.
자세한 사항은 아래 내용을 확인하세요.
사이냅에디터 2.8.0 버전부터 에디터 스크립트 파일을 경량화 하고자 임포트 기능과 도형 관련 기능을 외부 모듈로 분리하였습니다.
기존과 동일하게 임포트 기능과 도형 관련 기능을 사용하시려면 아래의 파일들을 추가로 include 하셔야 합니다.
xlsx, docx, hwp 등의 문서를 임포트 하는 기능을 사용하기 위해서는 에디터 패키지 externals 폴더 아래에 포함된 SEDocModelParser 모듈을 include 합니다.
<script src="externals/SEDocModelParser/SEDocModelParser.min.js"></script> |
도형이 포함된 문서를 임포트 하거나, shapeEditor 플러그인의 기능을 사용하기 위해서는 에디터 패키지 externals 폴더 아래에 포함된 SEShapeManager 모듈을 include 합니다.
<script src="externals/SEShapeManager/SEShapeManager.min.js"></script> |
Shift키를 누른체로 도형을 선택하면 멀티셀렉션이 가능하며 멀티셀렉션 상태에서는 속성버튼이 disable됩니다.
마우스 Drag를 이용한 멀티셀렉션을 제공하기 위해 "선택 모드"가 추가되었습니다.
config 파일 toolbar 설정에 아래와 같이 "selectionMode"를 추가하면 기능이 활성화됩니다.
'editor.toolbar': [ ..., 'selectionMode', 'shapeEditor' ... ], |
config 파일에 아래와 같은 설정을 추가하면 iframe mode를 사용 할 수 있습니다.
iframe mode를 설정하면 편집영역이 iframe 안쪽에 생성되어 외부 스타일의 영향을 최소화 할 수 있습니다.
사용자 UX에 달라지는 부분은 없습니다.
'editor.mode.iframe': { 'enable': true, 'style.urls': ['../dist/iframeMode/contentsEditStyle.css', ... ], 'script.urls': ['../dist/iframeMode/SEPolyfill.js'] } |
config 파일에 아래와 같은 설정을 추가하면 document mode를 사용 할 수 있습니다.
'editor.document.size' 값은 별도로 설정하지 않으면 아래와 같은 기본값을 가지게 됩니다. 기본 설정값은 MS-Word의 A4 크기와 유사합니다.
'editor.type': 'document', 'editor.document.size': { 'width': 793, 'height': 1122, 'padding': { 'top': 96, 'right': 96, 'bottom': 96, 'left': 96 } }, |
표 속성에 "글자처럼 취급" 기능이 추가되었습니다.
"글자처럼 취급"을 해제하면 표 이동핸들을 이용해서 표를 자유롭게 이동 할 수 있습니다.
자주 사용하는 도형을 툴바에 배치할 수 있는 추가되었습니다.
config파일의 toolbar 부분에 아래와 같이 "shapeEditor_도형이름" 형식으로 필요한 도형을 추가 할 수 있습니다.
'editor.toolbar': [ 'shapeEditor', 'shapeEditor_textBox','shapeEditor_rectangle','shapeEditor_roundedRectangle','shapeEditor_oval' ], |
[적용결과 ]
아이콘 | 도형이름 | 레이블 | 아이콘 | 도형이름 | 레이블 | 아이콘 | 도형이름 | 레이블 |
---|---|---|---|---|---|---|---|---|
line | 선 | arrow | 화살표 | doubleArrow | 양방향 화살표 | |||
elbowConnector | 꺾인 연결선 | elbowArrowConnector | 꺾인 화살표 연결선 | elbowDoubleArrowConnector | 꺾인 양쪽 화살표 연결선 | |||
curvedConnector | 구부러진 연결선 | curvedArrowConnector | 구부러진 화살표 연결선 | curvedDoubleArrowConnector | 구부러진 양쪽 화살표 연결선 | |||
textBox | 글상자 | rectangle | 직사각형 | roundedRectangle | 모서리가 둥근 직사각형 | |||
snip1Rectangle | 한쪽 모서리가 잘린 사각형 | snip2Rectangle | 양쪽 모서리가 잘린 사각형 | snip2DiagRectangle | 대각선 방향의 모서리가 잘린 사각형 | |||
snipRoundRectangle | 한쪽 모서리는 잘리고 다른쪽 모서리는 둥근 사각형 | round1Rectangle | 한쪽 모서리가 둥근 사각형 | round2Rectangle | 양쪽 모서리가 둥근 사각형 | |||
round2DiagRectangle | 대각선 방향의 모서리가 둥근 사각형 | oval | 타원 | triangle | 이등변 삼각형 | |||
rightTriangle | 직각 삼각형 | parallelogram | 평행 사변형 | trapezoid | 사다리꼴 | |||
diamond | 다이아몬드 | pentagon | 정오각형 | hexagon | 육각형 | |||
heptagon | 칠각형 | octagon | 팔각형 | decagon | 십각형 | |||
dodecagon | 십이각형 | pie | 원형 | chord | 현 | |||
teardrop | 눈물 방울 | frame | 액자 | halfFrame | 1/2 액자 | |||
corner | L 도형 | diagStripe | 대각선 줄무늬 | cross | 십자형 | |||
plaque | 배지 | can | 원통 | cube | 정육면체 | |||
bevel | 빗면 | donut | 빗면 | noSymbol | 없음 기호 | |||
blockArc | 막힌 원호 | foldedCorner | 모서리가 접힌 도형 | smileyFace | 웃는 얼굴 | |||
heart | 하트 | lightning | 번개 | sun | 해 | |||
moon | 달 | cloud | 구름 | arc | 원호 | |||
bracketPair | 양쪽 대괄호 | bracePair | 양쪽 중괄호 | leftBracket | 왼쪽 대괄호 | |||
rightBracket | 오른쪽 대괄호 | leftBrace | 왼쪽 중괄호 | rightBrace | 오른쪽 중괄호 | |||
plus | 더하기 | minus | 빼기 | multiply | 곱하기 | |||
division | 나누기 | equal | 등호 | notEqual | 부등호 | |||
rightArrow | 오른쪽 화살표 | leftArrow | 왼쪽 화살표 | upArrow | 위쪽 화살표 | |||
downArrow | 아래쪽 화살표 | leftRightArrow | 왼쪽/오른쪽 화살표 | upDownArrow | 위쪽/아래쪽 화살표 | |||
quadArrow | 왼쪽/오른쪽/위쪽/아래쪽 화살표 | leftRightUpArrow | 왼쪽/오른쪽/위쪽 화살표 | bentArrow | 굽은 화살표 | |||
uTurnArrow | U자형 화살표 | leftUpArrow | 왼쪽/위쪽 화살표 | bentUpArrow | 위로 굽은 화살표 | |||
curvedRightArrow | 오른쪽으로 구부러진 화살표 | curvedLeftArrow | 왼쪽으로 구부러진 화살표 | curvedUpArrow | 위로 구부러진 화살표 | |||
curvedDownArrow | 아래로 구부러진 화살표 | stripeRightArrow | 줄무늬가 있는 오른쪽 화살표 | notchedRightArrow | 톱니모양의 오른쪽 화살표 | |||
homePlate | 오각형 | chevron | 갈매기형 수장 | rightArrowCallout | 오른쪽 화살표 설명선 | |||
downArrowCallout | 아래쪽 화살표 설명선 | leftArrowCallout | 왼쪽 화살표 설명선 | upArrowCallout | 위쪽 화살표 설명선 | |||
leftRightArrowCallout | 왼쪽/오른쪽 화살표 설명선 | quadArrowCallout | 왼쪽/오른쪽/위쪽/아래쪽 화살표 설명선 | circularArrow | 원형 화살표 | |||
process | 처리 | alternateProcess | 대체처리 | decision | 판단 | |||
data | 데이터 | predefinedProcess | 종속처리 | internalStorage | 내부저장소 | |||
document | 문서 | multiDocument | 다중문서 | terminator | 수행의 시작/종료 | |||
preparation | 준비 | manualInput | 수동입력 | manualOperation | 수동연산 | |||
connector | 연결자 | offPageConnector | 페이지연결자 | card | 카드 | |||
punchedTape | 천공테이프 | summingJunction | 가산접합 | or | 논리합 | |||
collate | 대조 | sort | 정렬/분류 | extract | 추출 | |||
merge | 병합 | storedData | 저장데이터 | delay | 지연 | |||
magneticTape | 순차적 엑세스 저장소 | magneticDisk | 자기 디스크 | magneticDrum | 직접 엑세스 저장소 | |||
display | 화면 표시 | explosion1 | 폭발1 | explosion2 | 폭발2 | |||
star4 | 포인트가 4개인 별 | star5 | 포인트가 5개인 별 | star6 | 포인트가 6개인 별 | |||
star7 | 포인트가 7개인 별 | star8 | 포인트가 8개인 별 | star10 | 포인트가 10개인 별 | |||
star12 | 포인트가 12개인 별 | star16 | 포인트가 16개인 별 | star24 | 포인트가 24개인 별 | |||
star32 | 포인트가 32개인 별 | upRibbon | 위쪽 리본 | downRibbon | 아래쪽 리본 | |||
verticalScroll | 세로로 말린 두루마리모양 | horizontalScroll | 가로로 말린 두루마리모양 | wave | 물결 | |||
doubleWave | 이중 물결 | rectangleCallout | 사각 설명선 | roundedRectangleCallout | 모서리가 둥근 사각 설명선 | |||
ovalCallout | 타원 설명선 | cloudCallout | 구름모양 설명선 | borderCallout1 | 설명선1 | |||
borderCallout2 | 설명선2 | borderCallout3 | 설명선3 | accentCallout1 | 설명선1 (강조선) | |||
accentCallout2 | 설명선2 (강조선) | accentCallout3 | 설명선3 (강조선) | callout1 | 설명선1 (테두리없음) | |||
callout2 | 설명선2 (테두리없음) | callout3 | 설명선3 (테두리없음) | accentBorderCallout1 | 설명선1 (테두리 및 강조선) | |||
accentBorderCallout2 | 설명선2 (테두리 및 강조선) | accentBorderCallout3 | 설명선3 (테두리 및 강조선) |
도형 내부의 텍스트를 정렬 할 수 있는 기능이 추가되었습니다.
특수기호에 "그리스어 및 콥트어"가 추가되었습니다.
MS-Word, MS-Excel 문서에서 복사한 내용의 붙여넣기 품질이 개선되었습니다.
MS-Office, HWP 문서의에서 복사/붙여넣기는 구조적으로 많은 제약사항이 있습니다.
문서를 조금 더 원본에 가까운 형태로 불러오려면 "임포트" 기능을 이용해주세요.