2019년 4월 29일

사이냅에디터 2.3.0 버전이 릴리즈되었습니다.

주요 개선사항

1. 엑셀임포트

• xlsx,xls 확장자를 가지는 엑셀 문서 임포트 기능이 추가 되었습니다.

해당 확장자를 가지는 문서를 임포트 하였을 경우,

위와같은 영역을 선택할 수 있는 화면이 제공 됩니다.

자동 영역 선택을 클릭하면 데이터가 있는 모든 영역(데이터가 있는 시작부터 데이터가 있는 끝 영역)을 불러오게 됩니다.

1. 2,600개 이상의 셀을 가지는 문서를 임포트 하였을 경우에는
   

   

   위와 같은 경고메세지가 발생합니다. 

2. 10,000개 이상의 셀을 가지는 문서를 임포트 하였을 경우에는
   
   위와 같은 경고메세지가 발생합니다. 
   
   

2. DOM API

• DOM API를 사용하여 HTML DOM Element 접근하여 데이터 입력, 추출이 가능합니다.

Example)

입력

	document.getElementById('input').addEventListener('click', function () {
            var elInput = document.getElementsByClassName('setText');
            var data = [];


            for (var i = 0; i < elInput.length; i++) {
                data.push({
                    selector: '#' + elInput[i].name,
                    text: elInput[i].value
                });
            }
            try {
                window.editor.setTextBySelectors(data);
            } catch (e) {
                console.error(e);
            }
	});

추출

	document.getElementById('output').addEventListener('click', function () {
            var elOutputs = document.getElementsByClassName('getText');
            var selectors = [];
            var texts = [];


            for (var i = 0; i < elOutputs.length; i++) {
                selectors.push('#' + elOutputs[i].name);
            }

            texts = editor.getTextBySelectors(selectors);

            for (var i = 0; i < elOutputs.length; i++) {
                elOutputs[i].value = texts[i];
            }
	});

3. 수식 편집

• 수식을 이용한 자동계산 기능이 추가되었습니다.
  • 참조된 셀 데이터 편집 수식 자동 계산
  • 행/열 추가 및 삭제 수식 자동 계산
  • 셀 임포트 수식 데이터 유지
  • 에디터 편집 내용 저장 및 불러오기 수식 데이터 유지

formula js 설정시 수식 사용가능

<!-- formula-parser -->
<script type="text/javascript" src="../resource/formula-parser.min.js"></script>

수식이 있는 셀 표시

• 테이블이 선택되면 수식/표시형식이 있는 셀에 f(x) 표시가 보여집니다.

표시형식 적용

• 표에 표시형식이 추가되었습니다.

• 툴바에 "numberFormat" 을 추가해 드롭다운으로도 사용할 수 있습니다.

"editor.toolbar": ["table", "numberFormat"]

4. 표 편집 핸들 설정

• 표 핸들 사용여부 설정이 추가되었습니다.
  • 설정 키 : "editor.table.handle"
  • 기본값 : true

	/**
     * 에디터 표 핸들을 사용할지 여부를 설정합니다.
     */
    'editor.table.handle': true

5. 업로드 패널 숨기기 (이미지/동영상/파일 업로드)

• 업로드 API가 설정되지 않으면 업로드 패널이 보이지 않도록 개선되었습니다.
• 업로드 API 설정 :
  • "editor.upload.image.api"
  • "editor.upload.video.api"
  • "editor.upload.file.api"

6. 텍스트/텍스트 배경색 색상 표시

• 캐럿이 위치한 곳의 텍스트 색과 텍스트 배경색이 표시되도록 개선되었습니다.

7. 버튼 크기 설정하기

• 버튼의 크기를 조절할 수 있는 설정이 추가되었습니다.
  • 설정 키 : "editor.ui.button.size"
  • 기본값 :  35 (최소값 22, 단위 px)

8. 문서열기(임포트) 전후 이벤트

• 문서열기(임포트) 전후에 발생하는 이벤트가 추가되었습니다.
  • "beforeOpenDocument"
  • "afterOpenDocument"
• 자세한 내용 보기 : 이벤트 (Event)

9. 에디터 플러그인

• 에디터에 플러그인을 작성할 수 있게 되었습니다.
• 자세한 내용 보기 : add plugin

10. 포토에디터 (ToastUI Image Editor)

• ToastUI Image Editor가 플러그인으로 제공됩니다.
• 자세한 내용 보기 : 설치 (v2.2.0 이후) - 3.5 에디터 플러그인

11. 툴바 버튼 네비게이터

• 에디터의 크기가 작아져도 툴바의 버튼이 아래로 떨어져서 그려지지 않도록 개선되었습니다.

릴리즈 2.3.0 이슈 목록