利用字体插入特殊符号（二）

收藏

本帖最后由 Ellia.Duan 于 2024-7-29 13:34 编辑

在上一篇文章中，我们介绍到可以利用"Wingdings 2 "在表格中插入一些符号。但是对于普通用户来说，让他们去记忆符号对应的键盘值，无疑是困难的。

为此，我们可以在工具栏中添加图标下拉选择，选中后设置富文本，添加这个符号。
我们想要实现这个效果，如下图所示，该如何实现呢？
image.png676062621.png

我们观察上图，除了

其余部分是可以输入文字实现的。我们接下来处理，如何插入复选框符号。

1、定义菜单
image.png73023070.png

我们先来实现如上图所示的一个工具栏菜单。

var config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
let fontIconConfig = {
label: "字符集",
commandGroup: {
commands: ["setFontIcon"],
}
};
config.ribbon[1].buttonGroups.splice(config.ribbon[1].buttonGroups.length - 1, 0, fontIconConfig);
let fontIconCammands = {
setFontIcon: {
bigButton: "=ribbonHeight>toolbarHeight",
commandName: "setFontIcon",
direction: "=IF(ribbonHeight<toolbarHeight,"horizontal","vertical")",
dropdownList: [
{
groupName: "Wingdings 2",
groupItems: [{
iconClass: "iconfont icon-checkbox",
iconHeight: 20,
iconWidth: 14,
tip: "勾选",
value: "R"
}, {
iconClass: "iconfont icon-uncheckbox",
iconHeight: 20,
iconWidth: 14,
tip: "不勾选",
value: "£"
}
],
},
],
// iconClass: "ribbon-button-shapes",
text: "字符",
title: "插入字符",
type: "dropdown",
iconClass: "icon-custom-special-symbol",
execute: async (context, selectValue) => {
console.log(selectValue)
},
},
};
config.commandMap = {}
Object.assign(config.commandMap, fontIconCammands)
var designer = new GC.Spread.Sheets.Designer.Designer("gc-designer-container", config)

复制代码

通过上述代码，我们便实现了插入符号的菜单功能，这里就不详细介绍具体的实现细节，具体可以参考这篇文章。
2、重写execute

if (selectValue != null && selectValue != undefined) {
let sheet = context.getWorkbook().getActiveSheet(),
row = sheet.getActiveRowIndex(),
col = sheet.getActiveColumnIndex()
let value = sheet.getValue(row, col, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.ValueType.richText)
let richText = [
{
style: {
font: '16px "Wingdings 2"',
foreColor: "rgb(0, 0, 0)",
textDecoration: 0
},
text: selectValue,
}
]
if (value && value.richText) {
richText.unshift(...value.richText)
} else {
richText.unshift({text: sheet.getValue(row, col) == null ? '' : sheet.getValue(row, col) + ''})
}
let text = richText.map(item => item.text)
let newValue = {richText, text: text.join("")}
sheet.setValue(row, col, newValue, GC.Spread.Sheets.SheetArea.viewport);
}

复制代码

在上述代码中，我们重写了富文本，添加了字符样式，并重新setValue
3、双击打开富文本编辑器
在双击事件中，判断如果当前单元格存在富文本，则打开富文本编辑器，如下代码：

sheet.bind(GC.Spread.Sheets.Events.CellDoubleClick, function (e, info) {
let value = sheet.getValue(info.row, info.col, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.ValueType.richText)
if (value && value.richText) {
spread.commandManager().execute({
cmd: "richText",
sheetName: sheet.name(),
row: info.row,
col: info.col
});
}
});

复制代码

最后，由于菜单中无法获取单元格的焦点，所以会在单元格文本内容最后插入符号，如果有在文本中间内容插入符号的需求，可以剪切到相应位置。
完整代码可以参考附件的demo:

insert-符号.html (14.78 KB, 下载次数: 7)

		自动登录	找回密码
密码			立即注册

利用字体插入特殊符号（二）

0 个回复

SpreadJS 认证

SpreadJS 高级认证