当前位置：网站首页>Milkdown 控件图标

Milkdown 控件图标

2022-07-07 11:08:00 【Cliven_】

现象说明

在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的

https://fonts.googleapis.com/icon?family=Material+Icons+Outlined API

拿到了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;
}

这里还出现了一个字体文件

gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2

这里我也手动下载并把该文件放置于项目的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>