SpreadJS编辑器插入特殊字符

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

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

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

下载完成后的目录结构如下图所示：

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

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

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

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

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

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

复制代码

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

1. config.commandMap = {}
   
2.         var fontIconCammands = {
   
3.             "setFontIcon": {
   
4.                 text: "特殊字符",
   
5.                 title: "插入特殊字符",
   
6.                 type: "dropdown",
   
7.                 bigButton: "=ribbonHeight>toolbarHeight",
   
8.                 iconClass: "ribbon-button-fontIcon",
   
9.                 commandName: "setFontIcon",
   
10.                 direction: "=IF(ribbonHeight<toolbarHeight,"horizontal","vertical")",
    
11.                 dropdownList: [
    
12.                     {
    
13.                         groupName: "Spring",
    
14.                         groupItems: [{
    
15.                             iconClass: "iconfont icon-chunlianer",
    
16.                             iconHeight: 20,
    
17.                             iconWidth: 14,
    
18.                             value: "iconfont-" + String.fromCharCode(parseInt("e6b5", 16))
    
19.                         }, {
    
20.                             iconClass: "iconfont icon-denglongyi",
    
21.                             iconHeight: 20,
    
22.                             iconWidth: 14,
    
23.                             value: "iconfont-" + String.fromCharCode(parseInt("e6b7", 16))
    
24.                         }
    
25.                         ],
    
26.                     },
    
27.                 ],
    
28.                 execute: async (context, selectValue) => {
    
29.                     if (selectValue != null && selectValue != undefined) {
    
30.                         let newFont = selectValue.split("-")[0],
    
31.                             content = selectValue.split("-")[1];
    
32.                         let sheet = context.Spread.getActiveSheet(),
    
33.                             row = sheet.getActiveRowIndex(),
    
34.                             col = sheet.getActiveColumnIndex(),
    
35.                             cell = sheet.getCell(row, col),
    
36.                             font = cell.font();
    
37.                         var span = document.createElement("span");
    
38.                         span.style.font = font;
    
39.                         span.style.fontFamily = newFont;
    
40.                         var iconFont = span.style.font;
    
41. 
    
42.                         let value = sheet.getValue(row, col, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.ValueType.richText);
    
43.                         if (value === null || value === undefined) {
    
44.                             value = { richText: [{ style: { font: iconFont }, text: content }] };
    
45.                         }else if (value instanceof Object && value.richText) {
    
46.                             let rt = value.richText;
    
47.                             if (rt.length > 1 && rt[rt.length - 1].style) {
    
48.                                 let exStyle = JSON.parse(JSON.stringify(rt[rt.length - 1].style));
    
49.                                 if (rt[rt.length - 1].style.font) {
    
50.                                     var span = document.createElement("span");
    
51.                                     span.style.font = rt[rt.length - 1].style.font;
    
52.                                     span.style.fontFamily = newFont;
    
53.                                     exStyle.font = span.style.font;
    
54.                                 }
    
55.                                 else {
    
56.                                     exStyle.font = iconFont;
    
57.                                 }
    
58.                                 rt.push({ style: exStyle, text: content });
    
59.                             }
    
60.                             else {
    
61.                                 rt.push({ style: { font: iconFont }, text: content });
    
62.                             }
    
63.                         }
    
64.                         else {
    
65.                             value = {
    
66.                                 richText: [
    
67.                                     { style: { font: font }, text: value },
    
68.                                     { style: { font: iconFont }, text: content }]
    
69.                             };
    
70.                         }
    
71. 
    
72.                         context.Spread.commandManager().execute({ cmd: "editCell", sheetName: sheet.name(), row: row, col: col, newValue: value });
    
73.                     }
    
74.                 },
    
75.                 getState: (context) => {
    
76.                     return "";
    
77.                 }
    
78. 
    
79.             }
    
80.         }
    
81. 
    
82.         Object.assign(config.commandMap, fontIconCammands)
    
83.         designer.setConfig(config)

复制代码

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


测试项目见文章末尾。