【element-tiptap】如何引进系统中的字体？

news2024/11/25 22:40:56

源码地址：
https://github.com/Leecason/element-tiptap
源码中给出的字体如下
在这里插入图片描述
可以看到，咱们日常需要的黑体、微软雅黑等都没有，所以这篇文章来探索一下怎么加字体。
另外呢，肯定有小伙伴发现，这个按钮点击的时候，没有下拉框。我们先看一下这个组件的代码，对应的扩展地址为：
src/extensions/font-family.ts
组件是这个 src/components/MenuCommands/FontFamilyDropdown.vue
我摘录一下最关键的代码

<template>
  <el-dropdown placement="bottom" trigger="click" @command="toggleFontType">
    <command-button
      :enable-tooltip="enableTooltip"
      :tooltip="t('editor.extensions.FontType.tooltip')"
      :readonly="isCodeViewMode"
      icon="font-family"
    />[添加链接描述](https://element-plus.org/zh-CN/component/dropdown.html)
    <template #dropdown>
      <el-dropdown-menu class="el-tiptap-dropdown-menu">
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

可以看到，下拉框使用的是 element-plus 的 dropdown 组件
我们去到官网看一看这个组件是怎么用的
dropdown

可以看到，.el-dropdown 里面要套一个 .el-dropdown-link 才行
在这里插入图片描述
command-button 是自定义的组件，并且是多个地方公用的组件，所以我们直接在这个组件里面增加一个父元素 div.el-dropdown-link
src/components/MenuCommands/CommandButton.vue

<template>
  <div class="el-dropdown-link">
    <el-tooltip
      :content="tooltip"
      :show-after="350"
      :disabled="!enableTooltip || readonly"
      effect="dark"
      placement="top"
    >
      <div :class="commandButtonClass" @mousedown.prevent @click="onClick">
        <v-icon :name="icon"/>
      </div>
    </el-tooltip>
  </div>
</template>

酱紫下拉框就阔以正常使用啦！！
下面这几个扩展其实都有这个问题，咱们在公共组件中修改，就可以一次性一网打尽！
在这里插入图片描述
你肯定会发现咱俩的菜单项怎么不一样，其实是因为我把所有的扩展都放到 Simple.vue 页面中了，并且有的不需要的也稍微删了一下，这个也不重要啦。

我们还是看一下字体列表的数据是怎么来的
还是在 src/components/MenuCommands/FontFamilyDropdown.vue 中的计算属性

fontFamilies() {
  const fontFamilyOptions = this.editor.extensionManager.extensions.find(
    (e) => e.name === 'fontFamily'
  )!.options;
  console.log("fontFamilyOptions")
  console.log(fontFamilyOptions)
  return fontFamilyOptions.fontFamilyMap;
},

看一下输出是什么样子的
在这里插入图片描述

我们回到 fontFamily 这个扩展的定义 src/extensions/font-family.ts

可以看到 fontFamilyMap 是引用的 src/utils/font-type.ts 文件中定义的数据

const DEFAULT_FONT_FAMILY_NAMES = [
  'Arial',
  'Arial Black',
  'Georgia',
  'Impact',
  'Tahoma',
  'Times New Roman',
  'Verdana',
  'Courier New',
  'Lucida Console',
  'Monaco',
  'monospace',
];

export const DEFAULT_FONT_FAMILY_MAP = DEFAULT_FONT_FAMILY_NAMES.reduce(
  (obj: { [key: string]: string }, type: string) => {
    obj[type] = type;
    return obj;
  },
  {}
);

那么，是不是在这里加上我们想要的字体名称就可以呢…
经过我的实验呢，发现加宋体、黑体这样的汉字是木有用的，但是但是，我们使用中文字体的英文表示法就好啦！
Mac OS的一些：
华文细黑：STHeiti Light [STXihei]
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
儷黑 Pro：LiHei Pro Medium
儷宋 Pro：LiSong Pro Light
標楷體：BiauKai
蘋果儷中黑：Apple LiGothic Medium
蘋果儷細宋：Apple LiSung Light
Windows的一些：
新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑体：SimHei
宋体：SimSun
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋_GB2312：FangSong_GB2312
楷体_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微软雅黑体：Microsoft YaHei
装Office会生出来的一些：
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei

由于我的电脑是mac，我就先实验一下 STFangsong 这个字体，直接加到数组中
在这里插入图片描述
确实，这样子是好使的，但是呢，能不能显示成中文呢？
改造一下 src/utils/font-type.ts 这个文件的代码，把中文的字体的中文名和英文名的对应关系定义好，然后也加到默认字体中

const DEFAULT_FONT_FAMILY_NAMES = [
  'Arial',
  'Arial Black',
  'Georgia',
  'Impact',
  'Tahoma',
  'Times New Roman',
  'Verdana',
  'Courier New',
  'Lucida Console',
  'Monaco',
  'monospace',
];

const ZH_FONT_FAMILY_MAPS = {
  华文细黑: 'STHeiti Light',
  华文黑体: 'STHeiti',
  华文楷体: 'STKaiti',
  华文宋体: 'STSong',
  华文仿宋: 'STFangsong',
  '丽黑 Pro': 'LiHei Pro Medium',
  '丽宋 Pro': 'LiSong Pro Light',
  標楷体: 'BiauKai',
  苹果丽中黑: 'Apple LiGothic Medium',
  苹果丽细宋: 'Apple LiSung Light'
};

const DEFAULT_FONT_FAMILY_MAP = DEFAULT_FONT_FAMILY_NAMES.reduce(
  (obj: { [key: string]: string }, type: string) => {
    obj[type] = type;
    return obj;
  },
  {}
);
// 将ZH_FONT_FAMILY_MAPS 加入到默认字体中
Object.assign(DEFAULT_FONT_FAMILY_MAP, ZH_FONT_FAMILY_MAPS);
export default DEFAULT_FONT_FAMILY_MAP;

📢📢📢 此时会报错
在这里插入图片描述
原因是咱们导出的方式由之前的命名导出改为了默认导出，那么咱们在导入的时候，就不能再使用花括号进行导入
src/extensions/font-family.ts

import DEFAULT_FONT_FAMILY_MAP from '@/utils/font-type';

输出一下此时的字体数据
在这里插入图片描述
但是列表中还是都是英文，原因是模版中遍历的时候并没有使用数据 fontFamilies 中的 key ，咱们修改一下模版就可以了
v-for在遍历对象的时候，顺序是 value, key
src/components/MenuCommands/FontFamilyDropdown.vue
在这里插入图片描述

这样就成功了！！
在这里插入图片描述
此时可以看到这个菜单太长了，可以加个样式限制一下最大高度
可以在这里加一个文件，写自定义的样式

.el-tiptap-dropdown-menu {
  max-height: 400px;
  overflow-y: auto;
}

然后我们需要看一下其他的样式文件是怎么被引入的
在这里插入图片描述
原来是在这里，模仿！

@import '../styles/custom.scss';

成功！
在这里插入图片描述
但是其中有几个是没效果的，可能是因为我电脑上没有这种字体，有需要的同学可以搜一下怎么下载。
我是mac电脑，其实是可以通过字体册查看所有支持的字体

然后我们可以加一些比较好看的字体，比如下面这个卡哇伊的娃娃体
在这里插入图片描述
标出来的地方，就是该字体对应的英文标识符，有的字体没有，就写汉字就行。然后从这里我发现，上面的字体不起作用，是因为英文标识符不正确！所以大家以自己电脑上给出的标识符为准。

const ZH_FONT_FAMILY_MAPS = {
  华文黑体: 'STHeiti',
  华文楷体: 'STKaiti',
  华文宋体: 'STSong',
  华文仿宋: 'STFangsong',
  标楷体: 'BiauKai',
  '娃娃体-繁': 'DFWaWaTC-W5',
  '娃娃体-简': 'DFWaWaSC-W5',
  '行楷-简': '行楷-简',
  '翩翩体-简': '翩翩体-简',
  蘋果儷中黑: 'LiGothicMed'
};