Milkdown 控件图标

Cliven_

已于 2022-07-06 23:15:02 修改

阅读量619

点赞数 1

文章标签： vue.js 前端 javascript markdown

于 2022-07-06 23:14:19 首次发布

本文链接：https://blog.csdn.net/q1009020096/article/details/125649407

版权

现象说明

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

在加入了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

Cliven_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Milkdown 控件图标

在vite + vue3的项目中，使用Milkdown作为Markdown编辑框Milkdown.vue显示效果如图所有图标区域都变为了文字，并且挤在一起非常难看，这是因为主题使用了google提供的 Google material icons从 Milkdown官方给出的示例可以看到在文件中是引入了Google图标字体库的。这里我们的空间没有显示图标的原因就是没有Google图标字体库导致，我们可以和官方一样，直接在文件中增加一行CSS文件的引用就可以。index.html该种方式将会使用Go
复制链接

扫一扫