现象说明
在vite + vue3的项目中,使用Milkdown作为Markdown编辑框
Milkdown.vue
<template>
<VueEditor :editor="editor" />
</template>
<script setup>
import { Editor, rootCtx, defaultValueCtx } from "@milkdown/core";
import { nord } from "@milkdown/theme-nord";
import { VueEditor, useEditor } from "@milkdown/vue";
import { commonmark } from "@milkdown/preset-commonmark";
import { emoji } from "@milkdown/plugin-emoji";
import { history } from '@milkdown/plugin-history';
import { tooltip } from '@milkdown/plugin-tooltip';
import { menu } from "@milkdown/plugin-menu";
const { editor } = useEditor((root) =>
Editor.make()
.config((ctx) => {
ctx.set(rootCtx, root);
ctx.set(defaultValueCtx, "# Milkdown 💖 Vue");
})
.use(nord)
.use(emoji)
.use(commonmark)
.use(history)
.use(menu)
.use(tooltip)
);
</script>
显示效果如图
所有图标区域都变为了文字,并且挤在一起非常难看,这是因为 milkdown/theme-nord
主题使用了google提供的 Google material icons
从 Milkdown官方给出的示例 可以看到
在index.html
文件中是引入了Google图标字体库的。
解决
方式一 在线引入
这里我们的空间没有显示图标的原因就是没有Google图标字体库导致,我们可以和官方一样,直接在index.html
文件中增加一行CSS文件的引用就可以。
index.html
<html>
<head>
...
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" />
...
</head>
...
</html>
该种方式将会使用Google的CSS2 API自动引用并相关字体和配置,该方式有个问题就是在网络条件不不允许时,会导致图标依然无法加载。
方式二 离线引入
根据 Google material icons#setup_method_2_self_hosting 中描述,我们可以下载相关字体文件,然后手动配置css使用字体文件。
我这里简单起见直接访问了Google的
拿到了CSS配置文件以及字体文件。
CSS如下所示
/* fallback */
@font-face {
font-family: 'Material Icons Outlined';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v106/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}
.material-icons-outlined {
font-family: 'Material Icons Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
这里还出现了一个字体文件
这里我也手动下载并把该文件放置于项目的public/
目录下。
然后修改了Milkdown.vue,添加了上面的CSS,并且替换了字体文件的地址为本地的地址,修改后的文件如下所示。
<template>
<VueEditor :editor="editor" />
</template>
<script setup>
import { Editor, rootCtx, defaultValueCtx } from "@milkdown/core";
import { nord } from "@milkdown/theme-nord";
import { VueEditor, useEditor } from "@milkdown/vue";
import { commonmark } from "@milkdown/preset-commonmark";
import { emoji } from "@milkdown/plugin-emoji";
import { history } from '@milkdown/plugin-history';
import { tooltip } from '@milkdown/plugin-tooltip';
import { menu } from "@milkdown/plugin-menu";
const { editor } = useEditor((root) =>
Editor.make()
.config((ctx) => {
ctx.set(rootCtx, root);
ctx.set(defaultValueCtx, "# Milkdown 💖 Vue");
})
.use(nord)
.use(emoji)
.use(commonmark)
.use(history)
.use(menu)
.use(tooltip)
);
</script>
<style>
@font-face {
font-family: 'Material Icons Outlined';
font-style: normal;
font-weight: 400;
src: url(./gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}
.material-icons-outlined {
font-family: 'Material Icons Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
</style>
在加入了CSS和字体后可以看到控件上的图标已经正常。
参考文献
[1]. milkdown . demo . https://milkdown.dev/online-demo
[2]. milkdown . Integrations vue. https://milkdown.dev/vue
[3]. google . fonts . Material Icons Guide . 2022.03 . https://developers.google.com/fonts/docs/material_icons