수식 편집기는 수식을 만들고, 편집하고, 이해하기 위한 고급 편집 환경을 제공합니다. 주요 기능은 다음과 같습니다.
구문 강조 표시: 수식에 여러 구문 요소를 표시하여 가독성과 유용성을 높입니다.
포맷터: 수식 들여쓰기, 간격, 줄 바꿈 등을 자동으로 조정하여 수식의 가독성을 높이고 관리하기 편하게 만듭니다.
인텔리센스: 수식 자동 완성, 함수 매개 변수 힌트 등을 제공하여 수식 작성의 효율성을 높입니다.
린트: 수식에서 구문 및 오류 검사를 수행하여 오류와 취약성을 줄이고 오류 프롬프트를 제공합니다.
테마: 여러 개의 테마를 제공하며 테마 사용자 정의를 통해 편집기 모양을 변경할 수 있습니다.
예시
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2});
initSpread(spread);
};
function initSpread(spread) {
initData(spread);
let editor = new GC.Spread.Sheets.FormulaPanel.FormulaEditor(document.querySelector('.editor-container'));
editor.attach(spread);
document.querySelector('.format-width-limit').addEventListener('change', (e) => {
let value = e.target.value;
editor.options.formatWidthLimit = value === 'auto' ? value : parseInt(value);
editor.format();
});
document.querySelector('.panel-width').addEventListener('change', (e) => {
let v = +e.target.value;
v = Math.max(30, Math.min(90, v));
document.querySelector('.formula-panel').style.width = v + "%";
document.querySelector('.spread-container').style.width = 100 - v + "%";
spread.refresh();
editor.refresh();
editor.format();
});
document.querySelector('.format').addEventListener('click', (e) => {
editor.format();
});
document.querySelector('.save').addEventListener('click', (e) => {
editor.commandManager().execute({ cmd: 'commitContentToActiveCell' })
});
}
function initData (spread) {
spread.suspendPaint();
spread.options.allowDynamicArray = true;
var sheet = spread.sheets[0];
sheet.setValue(0, 0, 'Grade');
sheet.setValue(0, 6, 72);
sheet.setFormula(0, 1, '=LET(score, G1, IF(score >= 90, "A", IF(score >= 80, "B", IF(score >= 70, "C", IF(score >= 60, "D", "F")))))');
sheet.setValue(1, 0, 'Most Frequent');
sheet.setArray(1, 6, [[1, 2, 6, 6, 6, 5]]);
sheet.setFormula(1, 1, '=LET(data, G2:L2, unique_data, UNIQUE(data), count_data, COUNTIF(data, unique_data), max_count, MAX(count_data), most_frequent, INDEX(unique_data, MATCH(max_count, count_data, 0)), IF(max_count > 1, most_frequent, ""))');
sheet.setValue(2, 0, 'GUID');
sheet.setFormula(2, 1, '=CONCATENATE(DEC2HEX(RANDBETWEEN(0, 4294967295), 8), "-", DEC2HEX(RANDBETWEEN(0, 65535), 4), "-", DEC2HEX(RANDBETWEEN(16384, 20479), 4), "-", DEC2HEX(RANDBETWEEN(32768, 49151), 4), "-", DEC2HEX(RANDBETWEEN(0, 65535), 4), DEC2HEX(RANDBETWEEN(0, 4294967295), 8))');
sheet.setActiveCell(0, 1);
sheet.setColumnWidth(0, 100);
spread.resumePaint();
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="ko-kr"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="spread-container"></div>
<div class="formula-panel">
<div class="buttons">
<label>Format Width Limit:</label>
<select class="format-width-limit">
<option value="auto">Auto</option>
<option value="-1">-1</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="80">80</option>
<option value="999">999</option>
</select>
<label class="panel-width-label">Panel Width:<input class="panel-width" type="number" min="30" max="90" value="36" style="width: 40px;"></label>
<button class="format">Format</button>
<button class="save">Save</button>
</div>
<div class="editor-container"></div>
</div>
</div>
</body>
</html>
body {
position: absolute;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-tutorial {
position: relative;
height: 100%;
display: flex;
flex-direction: row;
overflow: hidden;
}
.spread-container {
width: 64%;
height: 100%;
vertical-align: top;
}
.formula-panel {
width: 36%;
height: 100%;
display: flex;
flex-direction: column;
}
.formula-panel .buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-right: 125px;
position: relative;
border-bottom: 1px solid black;
height: 22px;
}
.panel-width-label {
position: absolute;
right: 0px;
}
.panel-width {
width: 40px;
}
.formula-panel .editor-container {
height: calc(100% - 22px);
}
