数式エディタは、数式の作成／編集／理解のために高度な編集環境を提供します。主な機能は以下の通りです：
構文強調: 数式の要素をマークアップすることで、構文の読みやすさと使いやすさを向上します。
書式設定: 数式のインデントや間隔、改行などを自動的に調整し、可読性と保守性を高めます。
インテリセンス: 数式のオートコンプリートや関数のパラメータのヒント表示などを提供し、数式を作成する効率を向上します。
ソースコードチェック: 数式に対して構文とエラーのチェックを行い、文法ミスやソースコードの脆弱性を減らし、エラーメッセージを提示します。
テーマ: 多くの定義済みテーマを用意するほか、エディターの外観をカスタマイズすることもできます。
例
<template>
<div class="sample-tutorial">
<div class="spread-container">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
</div>
<div class="formula-panel">
<div class="buttons">
<label>数式の折り返し幅:</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">パネルの幅:<input class="panel-width" type="number" min="30" max="90"
value="36" /></label>
<button class="format">書式設定</button>
<button class="save">保存</button>
</div>
<div class="editor-container"></div>
</div>
</div>
</template>
<script setup>
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-formula-panel';
import '@mescius/spread-sheets-resources-ja';
GC.Spread.Common.CultureManager.culture("ja-jp");
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();
}
</script>
<style scoped>
body {
position: absolute;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
.sample-spreadsheets {
height: 100%;
}
.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);
}
</style>
<!DOCTYPE html>
<html lang="en" style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/ja/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/ja/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets-formula-panel': 'npm:@mescius/spread-sheets-formula-panel/index.js',
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
