本帖最后由 Winny 于 2022-2-8 17:03 编辑
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中加入特殊字符集的操作组,核心代码如下:
- 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编辑器中插入图表字符的需求了,具体的实现效果如下:
测试项目见文章末尾。
|
|