SpreadJS编辑器插入特殊字符

收藏

本帖最后由 Winny 于 2022-2-8 17:03 编辑

SpreadJS从V12之后，增加了对富文本的支持，不仅可以导入导出Excel中的富文本内容，也可以通过API的像是设置富文本。富文本的支持很好的解决了文档中上下标的问题及单元格导出PDF时，特殊字符乱码的问题。
但在当前的电子文档中，不少文档开始应用一些好看实用的图标字体，以阿里的iconfont为例，该网站是阿里打造的矢量图标管理、交流平台，设计师将图标上传到iconfont平台，用户可以自定义下载多种格式的icon，平台也可以将图标转换为字体，便于前端工程师自由调整和调用。
在一些特殊行业中，往往需要将某些特殊符号插入到单元格当中，在SpreadJS中插入这些特殊符号可以参考文章SpreadJS通过自定义字体解决文档中特殊字符的问题。本文侧重于介绍如何将iconfont中自己喜欢的一些图标插入到SpreadJS单元格中。
step1: 创建自己需要的图标字符集；
image.png980603637.png

登录iconfont，在iconfont上挑选自己想要的图标添加到右上方购物车中（鼠标悬浮在图标上会出现加入购物车的提示浮层）。

step2：将自己选中的字符集下载到本地；
image.png814737548.png

下载完成后的目录结构如下图所示：
image.png604429015.png

文件中提供的demo_index.html是在网站上使用该字体的一些介绍说明，感兴趣的同学可以仔细地阅读一下这部分。iconfont.ttf是这些图标对应的字体文件，我们在SpreadJS中也主要使用的是这个字体文件。以上两步更多的是iconfont的使用，如果有什么不了解的自行百度即可。

step3：创建包含在线编辑器的工程；
使用自己熟悉的方式创建一个包含编辑器的工程。

step4：将下载好的图标字体中的ttf文件和css引用到项目当中；
image.png811565246.png

css可以结合自己的业务在定义字体时做一些微调。

step4：创建编辑器并在编辑器中增加插入特殊字符的菜单项；首先，需要在编辑器的ribbon中加入特殊字符集的操作组，核心代码如下：

var designer = new GC.Spread.Sheets.Designer.Designer("gc-designer-container");
var config = GC.Spread.Sheets.Designer.DefaultConfig;
// 插入tab添加插入特殊字符
var fontIconConfig = {
"label": "字符集",
commandGroup: {
"commands": [
"setFontIcon",
]
}
};
config.ribbon[1].buttonGroups.splice(config.ribbon[1].buttonGroups.length - 1, 0, fontIconConfig)

复制代码

接下来设置对应的操作特殊字符的菜单项，并编写setFontIcon命令，关于自定义编辑器添加操作项可以参考自定义编辑器汇总，本帖不做详细介绍，核心的代码如下：

config.commandMap = {}
var fontIconCammands = {
"setFontIcon": {
text: "特殊字符",
title: "插入特殊字符",
type: "dropdown",
bigButton: "=ribbonHeight>toolbarHeight",
iconClass: "ribbon-button-fontIcon",
commandName: "setFontIcon",
direction: "=IF(ribbonHeight<toolbarHeight,"horizontal","vertical")",
dropdownList: [
{
groupName: "Spring",
groupItems: [{
iconClass: "iconfont icon-chunlianer",
iconHeight: 20,
iconWidth: 14,
value: "iconfont-" + String.fromCharCode(parseInt("e6b5", 16))
}, {
iconClass: "iconfont icon-denglongyi",
iconHeight: 20,
iconWidth: 14,
value: "iconfont-" + String.fromCharCode(parseInt("e6b7", 16))
}
],
},
],
execute: async (context, selectValue) => {
if (selectValue != null && selectValue != undefined) {
let newFont = selectValue.split("-")[0],
content = selectValue.split("-")[1];
let sheet = context.Spread.getActiveSheet(),
row = sheet.getActiveRowIndex(),
col = sheet.getActiveColumnIndex(),
cell = sheet.getCell(row, col),
font = cell.font();
var span = document.createElement("span");
span.style.font = font;
span.style.fontFamily = newFont;
var iconFont = span.style.font;
let value = sheet.getValue(row, col, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.ValueType.richText);
if (value === null || value === undefined) {
value = { richText: [{ style: { font: iconFont }, text: content }] };
}else if (value instanceof Object && value.richText) {
let rt = value.richText;
if (rt.length > 1 && rt[rt.length - 1].style) {
let exStyle = JSON.parse(JSON.stringify(rt[rt.length - 1].style));
if (rt[rt.length - 1].style.font) {
var span = document.createElement("span");
span.style.font = rt[rt.length - 1].style.font;
span.style.fontFamily = newFont;
exStyle.font = span.style.font;
}
else {
exStyle.font = iconFont;
}
rt.push({ style: exStyle, text: content });
}
else {
rt.push({ style: { font: iconFont }, text: content });
}
}
else {
value = {
richText: [
{ style: { font: font }, text: value },
{ style: { font: iconFont }, text: content }]
};
}
context.Spread.commandManager().execute({ cmd: "editCell", sheetName: sheet.name(), row: row, col: col, newValue: value });
}
},
getState: (context) => {
return "";
}
}
}
Object.assign(config.commandMap, fontIconCammands)
designer.setConfig(config)

复制代码

通过上述几步操作就可实现在SpreadJS编辑器中插入图表字符的需求了，具体的实现效果如下：
insertSymbol.gif229765013.png

测试项目见文章末尾。

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

SpreadJS编辑器插入特殊字符

0 个回复