文本框的形状

文本框形状是一种用于快速文本编辑的形状。

下面的例子显示了如何将一个形状设置为文本框。 每个自动形状都可以被设置为文本框。
const shapeTips = "Text Box With resizeToFitText\nPlease try typing some text here."; const optionsTips = "Please select a shape and try to modify the options."; 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("Text Box"); 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">Options</div> <div class="options-tips"></div> <input type="checkbox" id="isTextBoxOption" disabled> <label for="isTextBoxOption">isTextBox</label> <br> <input type="checkbox" id="resizeToFitTextOption" disabled> <label for="resizeToFitTextOption">resizeToFitText</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; }