当前位置:网站首页>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的
拿到了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
边栏推荐
- 免费手机号码归属地API查询接口
- Leetcode question brushing: binary tree 26 (insertion operation in binary search tree)
- Leetcode skimming: binary tree 25 (the nearest common ancestor of binary search tree)
- DHCP 动态主机设置协议 分析
- 《ASP.NET Core 6框架揭秘》样章[200页/5章]
- Leetcode skimming: binary tree 21 (verifying binary search tree)
- 认养一头牛冲刺A股:拟募资18.5亿 徐晓波持股近40%
- ip2long与long2IP 分析
- JS判断一个对象是否为空
- PACP学习笔记三:PCAP方法说明
猜你喜欢
Leetcode skimming: binary tree 25 (the nearest common ancestor of binary search tree)
TPG x AIDU|AI领军人才招募计划进行中!
Star Enterprise Purdue technology layoffs: Tencent Sequoia was a shareholder who raised more than 1billion
Leetcode brush questions: binary tree 19 (merge binary tree)
DHCP 动态主机设置协议 分析
[crawler] avoid script detection when using selenium
Go语言学习笔记-结构体(Struct)
ICLR 2022 | pre training language model based on anti self attention mechanism
How to apply @transactional transaction annotation to perfection?
HZOJ #240. 图形打印四
随机推荐
Ip2long and long2ip analysis
2022 examination questions and online simulation examination for safety production management personnel of hazardous chemical production units
ip2long之后有什么好处?
在字符串中查找id值MySQL
【无标题】
学习突围2 - 关于高效学习的方法
HZOJ #236. 递归实现组合型枚举
【Presto Profile系列】Timeline使用
Practical example of propeller easydl: automatic scratch recognition of industrial parts
layer弹出层的关闭问题
Users, groups, and permissions
HZOJ #236. Recursive implementation of combinatorial enumeration
非分区表转换成分区表以及注意事项
2022 practice questions and mock examination of the third batch of Guangdong Provincial Safety Officer a certificate (main person in charge)
Enterprise custom form engine solution (XII) -- experience code directory structure
PACP学习笔记三:PCAP方法说明
自定义线程池拒绝策略
RecyclerView的数据刷新
. Net ultimate productivity of efcore sub table sub database fully automated migration codefirst
SSM框架搭建的步骤