Status


colour	Yellow
title	릴리즈 2.4.0 이상

수식 UX 변경

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

...

엑셀함수를 사용하여 간단한 계산을 적용할 수 있습니다.

사용가능한 함수목록은 "지원함수" 페이지를 참고하세요.

설명	참고
작성 방법 셀에 '=' 문자 입력시 셀 좌표 노출되며

수식

- 함수 입력 모드로

변경

- 변경됩니다.
- '=' 문자 제거시 셀 좌표 제거

됩니다.

단 문자열에 포함된 = 문자가 맨 앞으로 온다고해서 수식 입력 모드로 바뀌지는 않습니다.

ex) 123=456 에서 123 을 제거한다고해도 수식 입력 모드로 되지 않음

Image Removed

- 되면서 일반 텍스트 입력상태로 변경됩니다.
작성 완료 방법
- Enter 키 동작시 입력된

수식

- 함수 계산되어

표현되며

- 그 결과가 표시되며, 셀 셀렉션으로

변경됨

Image Removed

수식으로

- 변경됩니다.
- 함수로 판단되는 셀에서

마우스

- 캐럿

빠져나갈시 자동으로

- 빠져나가면 수식 계산되어

표현됨

Image Removed

- 그 결과가 표시됩니다.
작성된 엑셀함수 수정 방법
- 수식 계산된 셀로 캐럿

이동시, 수식 계산식으로 표현됨

캐럿은 항상 맨앞으로 focus 이동

Image Removed

탭, 언탭 이동시 수식셀인 경우 수식으로 변경되고 다른셀로 이동시 자동 계산되어 표현

Image Removed

텍스트를 제외한 다른 객체가 셀에 포함된다면 수식 계산되지 않음

- 이동하면, 입력된 함수(또는 계산식)이 표시됩니다.
- 이 때 캐럿은 항상 셀의 제일 앞으로 이동합니다.

주의)
문자열에 포함된 = 문자가 맨 앞으로 온다고해서 함수 입력 모드로 바뀌지는 않습니다.
예를 들어 123=456 에서 123 을 제거한다고해도 함수 입력 모드로 되지 않습니다.

Image Added

계산되지 않는 조건
- 함수(또는 계산식)을 제외한 다른 객체(표, 가로줄, 이미지, 비디오 등

Image Removed

- )가 셀에 포함된다면 계산식이 처리되지 않습니다.
- 일반

텍스트런을 제외한 런이 포함된다면 수식 계산되지 않음

- 텍스트를 제외한 속성(탭, 줄나눔

(Shift+Enter)

- , 하이퍼링크

Image Removed

- )이 포함된다면 계산식이 처리되지 않습니다.
- 글머리기호, 인용기호

포함된 셀은 수식 계산되지 않음

Image Removed

수식으로 계산되어 표현된 셀으로는 객체 이동 할 수 없음

- 포함되면 계산식이 처리되지 않습니다.
- 함수(또는 계산식)로 처리된 셀로는 객체(이미지, 비디오, 표 등

Image Removed

수식 계산되어 표현된 셀 우하단에 삼각형으로 마크표시
마우스 오버시 마크표시 f(x)로 수식 셀 표현

Image Removed

...

- )를 이동 할 수 없습니다.

Image Added

HTML

<!-- jQueryexternal modules -->
<script type="text/javascript" src="'https://codewww.jquerysynapeditor.com/jquery-3.3.1.js"></script>

<!-- code mirror -->
/se/resource/synapeditor/externals/formulaParser/formula-parser.min.js'></script>
<script type="text/javascript" src='httphttps://www.synapeditor.com/se/resource/synapeditor/externals/codemirrorSEDocModelParser/codemirrorSEDocModelParser.min.js'></script>
<script type="text/javascript" src="http'https://www.synapeditor.com/se/resource/synapeditor/externals/codemirrorSEShapeManager/xmlSEShapeManager.min.js"'></script>
<link<script rel='stylesheet' href='httptype="text/javascript" src='https://www.synapeditor.com/se/resource/synapeditor/externals/codemirrorcodeMirror/codemirror.min.css'>

<!-- formular parser -->js'></script>
<script type="text/javascript" src='http"https://www.synapeditor.com/se/resource/synapeditor/externals/formula-parser/formula-parsercodeMirror/xml.min.js'"></script>
<link rel='stylesheet' href='https://www.synapeditor.com/se/resource/synapeditor/externals/codeMirror/codemirror.min.css'>

<!-- Synap Editor -->
<script src='httphttps://www.synapeditor.com/se/resource/synapeditor/synapeditor.config.js'></script>
<script src='httphttps://www.synapeditor.com/se/resource/synapeditor/synapeditor.min.js'></script>
<link href='httphttps://www.synapeditor.com/se/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 style="background-color: #ffffff; width:99%; height:500px;">
    <div id="synapEditor">
    <table style="vertical-align: text-bottom; border-collapse: collapse; line-height: normal; width: calc(100% - 0px); word-break: break-all;" data-template-id="13">
        <colgroup>
            <col style="width: 34.770114942528735%;">
            <col style="width: 21.743295019157088%;">
            <col style="width: 21.743295019157088%;">
            <col style="width: 21.743295019157088%;">
        </colgroup>
        <tbody>
            <tr>
                <th style="background-color: rgb(169, 169, 169); text-align: center; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;" scope="col">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>Item</span></p>
                </th>
                <th style="background-color: rgb(169, 169, 169); text-align: center; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;" scope="col">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>Quantitiy</span></p>
                </th>
                <th style="background-color: rgb(169, 169, 169); text-align: center; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;" scope="col">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>Price</span></p>
                </th>
                <th style="background-color: rgb(169, 169, 169); text-align: center; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;" scope="col">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>Total</span></p>
                </th>
            </tr>
            <tr>
                <td style="text-align: center; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>pencil</span></p>
                </td>
                <td style="text-align: right; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>3</span></p>
                </td>
                <td style="text-align: right; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>100</span></p>
                </td>
                <td style="text-align: right; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;"
                    data-formula-text="product(B2,C2)">
                    <p style="text-align: right; margin: 0px; display: block; overflow-wrap: break-word;">
                        <span>300</span></p>
                </td>
            </tr>
            <tr>
                <td style="text-align: center; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>paper</span></p>
                </td>
                <td style="text-align: right; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>5</span></p>
                </td>
                <td style="text-align: right; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>180</span></p>
                </td>
                <td style="text-align: left; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;" data-formula-text="product(B3,C3)">
                    <p style="text-align: right; margin: 0px; display: block; overflow-wrap: break-word;">
                        <span>900</span></p>
                </td>
            </tr>
            <tr>
                <td style="text-align: center; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>eraser</span></p>
                </td>
                <td style="text-align: right; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>5</span></p>
                </td>
                <td style="text-align: right; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>50</span></p>
                </td>
                <td style="text-align: left; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;" data-formula-text="product(B4,C4)">
                    <p style="text-align: right; margin: 0px; display: block; overflow-wrap: break-word;">
                        <span>250</span></p>
                </td>
            </tr>
            <tr>
                <td style="text-align: center; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>note</span></p>
                </td>
                <td style="text-align: right; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>15</span></p>
                </td>
                <td style="text-align: right; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>200</span></p>
                </td>
                <td style="text-align: left; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;" data-formula-text="product(B5,C5)">
              <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"  <p style="bordertext-collapsealign: collapseright; word-breakmargin: break-all0px; line-heightdisplay: normalblock; widthoverflow-wrap: 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: solidbreak-word;">
                        <span>3000</span></p>
                </td>
            </tr>
            <tr>
                <td style="text-align: center; padding: 5px; 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; border-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="margin: 0px; display: block; overflow-wrap: break-word; border-width"><span style="font-weight: 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: solidbold;">total</span></p>
                </td>
                <td style="text-align: right; padding: 5px; 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-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="text-align: center; margin: 0px; display: block; overflow-wrap: break-word;">
                        <span>-</span></p>
                </td>
                <td style="text-align: right; padding: 5px; border-color: rgb(0, 0, 0);">
					<p style="overflow-wrap border-style: solid; border-width: 1px; word-break: 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>
	">
                    <p style="text-align: center; margin: 0px; display: block; overflow-wrap: break-word;">
                        <span>-</span></p>
                </td>
                <td style="text-align: left; padding: 5px; border-color: rgb(0, 0, 0); border-style: solid; border-width: 1px; word-break: break-word;">
                    <p style="text-align: right; margin: 0px; display: block; overflow-wrap: break-word;"><br></p>
                </td>
            </tr>
        </tbody>
    </table>
	</div>
</div>
<script>
		window.editorconst config = new SynapEditor("synapEditor"Object.assign(synapEditorConfig, {
			"editor.license":"/se/resource/license.json",
			"editor.toolbar": ["new","table"],
			"editor.menu.show": false,
			"editor.import.maxSize": 10485760,
		    "editor.import.api": "/se/importDoc",
		    "editor.upload.maxSize": 3145728,
		    "editor.upload.image.api": "/se/uploadFile",
		    "editor.upload.video.api": "/se/uploadFile",
		    "editor.upload.file.api": "/se/uploadFile"
			});
		window.editor = new SynapEditor("synapEditor", config, document.getElementById('synapEditor').innerHTML);
</script>

...

Space shortcuts

Page tree

Versions Compared

Old Version 2

New Version Current

Key

수식 UX 변경

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 2

New Version Current

Key

수식 UX 변경