概述
本 Demo 展示了如何创建和使用文本框形状，包括设置文本框属性、自动调整大小以适应文本内容等功能。Demo 中创建了两个文本框：一个基础文本框和一个带自适应文本功能的文本框，并提供了交互式选项面板来动态修改文本框属性。
实现思路
创建两个矩形形状，并将其设置为文本框
为文本框设置样式（白色背景、黑色文本和边框）
第二个文本框启用 resizeToFitText 属性，实现根据文本自动调整高度
绑定形状选择事件，当选择形状时显示当前属性状态
提供复选框交互，允许用户动态切换文本框属性
代码解析
创建并设置文本框
这段代码创建了一个矩形形状。shapes.add() 方法的第一个参数为空字符串，表示使用自动生成的名称。通过调用 isTextBox(true) 将形状转换为文本框，使其支持单击编辑。
设置文本框样式
此函数统一设置文本框的样式：白色填充、黑色文本、黑色边框。通过 style() 方法获取样式对象，修改后再设置回去。
启用自动调整大小
将 resizeToFitText 属性设置为 true 后，文本框会根据文本内容自动调整高度，确保所有文本可见。
响应形状选择事件
当用户选择形状时，事件处理器会读取形状的 isTextBox 和 resizeToFitText 属性，并更新选项面板的复选框状态。
运行效果
工作表中有两个文本框：左侧为基础文本框，右侧为带自适应文本功能的文本框
单击文本框可直接编辑文本内容
选择形状后，右侧选项面板会显示当前的文本框属性
可以通过复选框动态切换“文本框”和“自动调整大小”属性
第二个文本框在输入多行文本时会自动扩展高度以适应内容
API 参考
shapes.add() 方法
name：形状名称，传空字符串则自动生成
autoShapeTypeOrModel：形状类型，如 AutoShapeType.rectangle
left、top：形状的位置坐标
width、height：形状的宽度和高度（可选）
isTextBox() 方法
value：可选，设置为 true 将形状转换为文本框
返回值：获取时返回布尔值，设置时无返回值
文本框支持单击编辑，非文本框需要双击或按 Enter 键编辑
resizeToFitText 属性
设置为 true 时，形状高度会根据文本内容自动调整
需要通过 shape.style() 获取样式对象，修改后设置回去
const shapeTips = "带自适应文本的文本框\n请在此输入一些文字。";
const optionsTips = "请选择一个形状并尝试修改选项。";
window.onload = function () {
let workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
let sheet = workbook.getActiveSheet();
addShape(sheet);
bindEvents(sheet);
$(".options-tips").innerText = optionsTips;
}
function setTextBox(shape) {
let shapeStyle = shape.style();
shapeStyle.fill.color = 'white';
shapeStyle.textEffect.color = 'black';
shapeStyle.line.color = 'black';
shape.style(shapeStyle);
shape.isTextBox(true);
}
function addShape(sheet) {
let textBox = sheet.shapes.add('', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 100, 50);
setTextBox(textBox);
textBox.text("文本框");
let textBox2 = sheet.shapes.add('', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 350, 50, 250);
textBox2.text(shapeTips);
setTextBox(textBox2);
let style = textBox2.style();
style.textFrame.resizeToFitText = true;
textBox2.style(style);
}
function $(css) {
return document.querySelector(css);
}
function setCheckboxState(state) {
let isTextBoxOption = $("#isTextBoxOption"), resizeToFitTextOption = $("#resizeToFitTextOption");
isTextBoxOption.disabled = !state;
resizeToFitTextOption.disabled = !state;
}
function bindEvents(sheet) {
let isTextBoxOption = $("#isTextBoxOption"), resizeToFitTextOption = $("#resizeToFitTextOption");
sheet.bind(GC.Spread.Sheets.Events.ShapeSelectionChanged, undefined, (type, data) => {
let shape = data.shape;
if (shape && shape.isSelected()) {
isTextBoxOption.checked = shape.isTextBox();
resizeToFitTextOption.checked = shape.style().textFrame.resizeToFitText;
setCheckboxState(true);
} else {
setCheckboxState(false);
}
});
isTextBoxOption.addEventListener('change', (e) => {
let shapes = sheet.shapes.all();
shapes.filter((shape) => shape.isSelected()).forEach((shape) => {
shape.isTextBox(isTextBoxOption.checked);
});
});
resizeToFitTextOption.addEventListener('change', (e) => {
let shapes = sheet.shapes.all();
shapes.filter((shape) => shape.isSelected()).forEach((shape) => {
let shapeStyle = shape.style();
shapeStyle.textFrame.resizeToFitText = resizeToFitTextOption.checked;
shape.style(shapeStyle);
});
})
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="zh-cn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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="sample-spreadsheets"></div>
<div class="options-container">
<div class="options-title">选项</div>
<div class="options-tips"></div>
<input type="checkbox" id="isTextBoxOption" disabled>
<label for="isTextBoxOption">文本框</label>
<br>
<input type="checkbox" id="resizeToFitTextOption" disabled>
<label for="resizeToFitTextOption">自动调整大小</label>
</div>
</div>
</body>
</html>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-tutorial {
position: relative;
height: 100%;
/* overflow: hidden; */
}
.sample-spreadsheets {
width: calc(100% - 250px);
height: 100%;
/* overflow: hidden; */
}
.options-container {
position: absolute;
top: 0px;
right: 0px;
width: 250px;
height: 100%;
padding: 12px;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
user-select: none;
}
.options-title {
font-size: larger;
font-weight: bolder;
margin-bottom: 10px;
}
.options-tips {
margin-bottom: 10px;
}
