수식 UX 변경

사이냅 에디터 2.3.0 버전에서 사용하던 풍선팝업의 수식 inpux box 제거됨
수식 삽입 방식 변경

내용	참고
셀에 '=' 문자 입력시 셀 좌표 노출되며 수식 입력 모드로 변경 '=' 문자 제거시 셀 좌표 제거 됩니다. 단 문자열에 포함된 = 문자가 맨 앞으로 온다고해서 수식 입력 모드로 바뀌지는 않습니다. ex) 123=456 에서 123 을 제거한다고해도 수식 입력 모드로 되지 않음
Enter 키 동작시 입력된 수식 계산되어 표현되며, 셀 셀렉션으로 변경됨
수식으로 판단되는 셀에서 마우스 캐럿 빠져나갈시 자동으로 수식 계산되어 표현됨
수식 계산된 셀로 캐럿 이동시, 수식 계산식으로 표현됨 캐럿은 항상 맨앞으로 focus 이동
탭, 언탭 이동시 수식셀인 경우 수식으로 변경되고 다른셀로 이동시 자동 계산되어 표현
텍스트를 제외한 다른 객체가 셀에 포함된다면 수식 계산되지 않음 표, 가로줄, 이미지, 비디오 등
일반 텍스트런을 제외한 런이 포함된다면 수식 계산되지 않음 탭, 줄나눔(Shift+Enter), 하이퍼링크
글머리기호, 인용기호 포함된 셀은 수식 계산되지 않음
수식으로 계산되어 표현된 셀으로는 객체 이동 할 수 없음 이미지, 비디오, 표 등
수식 계산되어 표현된 셀 우하단에 삼각형으로 마크표시 마우스 오버시 마크표시 f(x)로 수식 셀 표현

체험하기

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<!-- code mirror -->
<script type="text/javascript" src='http://www.synapeditor.com/resource/synapeditor/externals/codemirror/codemirror.min.js'></script>
<script type="text/javascript" src="http://www.synapeditor.com/resource/synapeditor/externals/codemirror/xml.min.js"></script>
<link rel='stylesheet' href='http://www.synapeditor.com/resource/synapeditor/externals/codemirror/codemirror.min.css'>

<!-- formular parser -->
<script type="text/javascript" src='http://www.synapeditor.com/resource/synapeditor/externals/formula-parser/formula-parser.min.js'></script>


<!-- Synap Editor -->
<script src='http://www.synapeditor.com/resource/synapeditor.config.js'></script>
<script src='http://www.synapeditor.com/resource/synapeditor/synapeditor.min.js'></script>
<link href='http://www.synapeditor.com/resource/synapeditor/synapeditor.min.css' rel='stylesheet' type='text/css'>

<!-- tui Image Editor -->
<script type="text/javascript" src='http://www.synapeditor.com/resource/synapeditor/plugins/tuiImageEditor/tuiImageEditor.min.js'></script>
<link rel='stylesheet' href='http://www.synapeditor.com/resource/synapeditor/plugins/tuiImageEditor/tuiImageEditor.min.css'>


<!-- formula-parser -->
<script type="text/javascript" src='http://www.synapeditor.com/resource/synapeditor/2.4.0/formula-parser.min.js'></script>

<div style="background-color: #ffffff; width:99%; height:500px;">
        <div id="synapEditor">
			<table data-drawing-object-id="se_28d15618-5be8-4779-b5ab-d199bf82e64c" data-template-id="1" data-paragraph-id="se_5263e375-dbd8-4f08-a72f-a6a5c4332ea9" style="border-collapse: collapse; word-break: break-all; line-height: normal; width: 540px; height: 270.406px; vertical-align: text-bottom;" class="">
		<colgroup>
			<col style="width: 135px;">
			<col style="width: 135px;">
			<col style="width: 135px;">
			<col style="width: 135px;">
		</colgroup>
		<tbody>
			<tr style="height: 135.203px;">
				<td data-table-row-index="0" data-table-col-index="0" data-index-label="A1" style="padding: 5px; word-break: break-word; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="overflow-wrap: break-word; margin: 0px;">
						<span>1</span>
					</p>
				</td>
				<td data-table-row-index="0" data-table-col-index="1" data-index-label="B1" style="padding: 5px; word-break: break-word; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="overflow-wrap: break-word; margin: 0px;">
						<span>2</span>
					</p>
				</td>
				<td data-table-row-index="0" data-table-col-index="2" data-index-label="C1" style="padding: 5px; word-break: break-word; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="overflow-wrap: break-word; margin: 0px;">
						<span>3</span>
					</p>
				</td>
				<td data-table-row-index="0" data-table-col-index="3" data-formula-text="sum(a1:c1)" data-index-label="D1" style="padding: 5px; word-break: break-word; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="overflow-wrap: break-word; margin: 0px;">
						<span>6</span>
					</p>
				</td>
			</tr>
			<tr style="height: 135.203px;">
				<td data-table-row-index="1" data-table-col-index="0" data-index-label="A2" style="padding: 5px; word-break: break-word; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="overflow-wrap: break-word; margin: 0px;">
						<span>1</span>
					</p>
				</td>
				<td data-table-row-index="1" data-table-col-index="1" data-index-label="B2" style="padding: 5px; word-break: break-word; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="overflow-wrap: break-word; margin: 0px;">
						<span>2</span>
					</p>
				</td>
				<td data-table-row-index="1" data-table-col-index="2" data-index-label="C2" style="padding: 5px; word-break: break-word; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="overflow-wrap: break-word; margin: 0px;">
						<span>3</span>
					</p>
				</td>
				<td data-table-row-index="1" data-table-col-index="3" data-formula-text="max(a2:c2)" data-index-label="D2" style="padding: 5px; word-break: break-word; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="overflow-wrap: break-word; margin: 0px;">
						<span>3</span>
					</p>
				</td>
			</tr>
		</tbody>
	</table>
		</div>
</div>
<script>
		window.editor = new SynapEditor("synapEditor", {
			"editor.license":"/resource/license.json",
			"editor.toolbar": ["new","table"],
			"editor.menu.show": false,
			"editor.import.maxSize": 10485760,
		    "editor.import.api": "/importDoc",
		    "editor.upload.maxSize": 3145728,
		    "editor.upload.image.api": "/uploadFile",
		    "editor.upload.video.api": "/uploadFile",
		    "editor.upload.file.api": "/uploadFile"
			}, document.getElementById('synapEditor').innerHTML);
</script>