插入特殊字符

问题：如何实现插入特殊字符

背景：

不少文档开始应用一些好看实用的图标字体，以阿里的iconfont为例，用户可以自定义下载多种格式的icon，平台也可以将图标转换为字体，便于前端工程师自由调整和调用。在一些特殊行业中，往往需要将某些特殊符号插入到单元格当中，这样的需求如何实现呢？

实现步骤：

Step1：创建自己需要的图标字符集

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

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

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

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

Step3：创建包含在线编辑器的工程

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

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

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

Step5：创建编辑器并在编辑器中增加插入特殊字符的菜单项

首先，需要在编辑器的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编辑器中插入图表字符的需求了，具体的实现效果如下：

170035e6w4r3pwsf1690fu

具体Demo请查看附件。图标字体.zip

作者: Winny.Zhang | 审核：Lynn.Dou | 更新时间：2023.12.28